I am showing only one navcontent. I already have Facebook and Instagram contents in my page, that is not the problem here.
function socialMedia(media, mediaName) {
var i, navcontent, navlinks;
tabcontent = document.getElementsByClassName("navcontent");
for (i = 0; i < navcontent.length; i++) {
navcontent[i].style.display = "none";
}
navlinks = document.getElementsByClassName("navlinks");
for (i = 0; i < navlinks.length; i++) {
navlinks[i].className = navlinks[i].className.replace(" active", "");
}
document.getElementById(mediaName).style.display = "block";
media.currentTarget.className += " active";
}.nav {
overflow: hidden;
margin-top: 50px;
}
button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 0px;
height: 50px;
width: 110px;
transition: 0.3s;
font-size: 17px;
color: #360b9a;
transition: .5s all;
}
button:hover {
font-weight: 700;
}
.active {
background-color: #ccc;
}
.navcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<div class="nav">
<button class="navlinks" onclick="socialMedia(media, 'Twitter')">Twitter</button>
<button class="navlinks" onclick="socialMedia(media, 'Facebook')">Facebook</button>
<button class="navlinks" onclick="socialMedia(media, 'Instagram')">Instagram</button>
</div>
<div id="Twitter" class="navcontent">
<p>
Look no more if you are after a venue to host thousands of delegates for highly exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the flexibility to customize the venue according to your space and event requirements.
</p>
<p>
Look no more if you are after a venue to host thousands of delegates for highly exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the flexibility to customize the venue according to your space and event requirements.
</p>
<div class="sub">
<a>#lorem</a>
<a>#ipsum</a>
<a>#lorem</a>
</div>
</div>If by media in onclick="socialMedia(media, 'Twitter')" you meant the clicked element, then it should be this. Then you can reference it like media.className in the function.
function socialMedia(media, mediaName) {
var i, navcontent, navlinks;
navcontent = document.getElementsByClassName("navcontent");
for (i = 0; i < navcontent.length; i++) {
navcontent[i].style.display = "none";
}
navlinks = document.getElementsByClassName("navlinks");
for (i = 0; i < navlinks.length; i++) {
navlinks[i].className = navlinks[i].className.replace(" active", "");
}
document.getElementById(mediaName).style.display = "block";
media.className += " active";
}.nav {
overflow: hidden;
margin-top: 50px;
button{
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 15px 0px;
height: 50px;
width: 110px;
transition: 0.3s;
font-size: 17px;
color: #360b9a;
transition: .5s all;
&:hover {
font-weight: 700;
}
}
.active {
background-color: #ccc;
}
}
.navcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}<div class="nav">
<button class="navlinks" onclick="socialMedia(this, 'Twitter')">Twitter</button>
<button class="navlinks" onclick="socialMedia(this, 'Facebook')">Facebook</button>
<button class="navlinks" onclick="socialMedia(this, 'Instagram')">Instagram</button>
</div>
<div id="Twitter" class="navcontent">
<p>
Look no more if you are after a venue to host thousands of delegates for highly
exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the
flexibility to customize the venue according to your space and event requirements.
</p>
<p>
Look no more if you are after a venue to host thousands of delegates for highly
exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the
flexibility to customize the venue according to your space and event requirements.
</p>
<div class="sub">
<a>#lorem</a>
<a>#ipsum</a>
<a>#lorem</a>
</div>
</div>
<div id="Facebook"></div>
<div id="Instagram"></div> on* JS attribute handlers. JS should be in one place only, and that's the respective tag or file.data-* attribute to store a selector target ID like: data-social="#fb"classList.toggle("active", boolean) on your buttons and contents. (Don't ever use stuff like media.className += " active";)// DOM utility functions:
const el = (sel, par) => (par ?? document).querySelector(sel);
const els = (sel, par) => (par ?? document).querySelectorAll(sel);
// Task: Toggle social
const elsSocialButtons = els("[data-social]");
const elsNavContents = els(".navcontent");
const toggleNavContent = (elSocialBtn) => {
elsNavContents.forEach(elNav => {
elNav.classList.toggle("active", elNav === el(elSocialBtn.dataset.social));
});
elsSocialButtons.forEach(elBtn => {
elBtn.classList.toggle("active", elBtn === elSocialBtn);
});
}
els("[data-social]").forEach(elSocialBtn => {
elSocialBtn.addEventListener("click", (ev) => {
toggleNavContent(ev.currentTarget);
});
});.navcontent {
background: #ccc;
display: none;
}
.navcontent.active {
display: block;
}
.navlinks.active {
color: red;
}<div class="nav">
<button class="navlinks" data-social="#tw">Twitter</button>
<button class="navlinks" data-social="#fb">Facebook</button>
<button class="navlinks" data-social="#ig">Instagram</button>
</div>
<div id="tw" class="navcontent">Tweets...</div>
<div id="fb" class="navcontent">Facebook...</div>
<div id="ig" class="navcontent">Instagram...</div>