Solo estoy mostrando un navcontent . Ya tengo contenidos de Facebook e Instagram en mi página, ese no es el problema aquí.
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>Si por media en onclick="socialMedia(media, 'Twitter')" se refería al elemento en el que se hizo clic, entonces debería ser this . Luego puede hacer referencia a él como media.className en la función.
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. JS debe estar en un solo lugar, y esa es la etiqueta o el archivo respectivo.data-* para almacenar una ID de destino del selector como: data-social="#fb"classList.toggle("active", boolean) en sus botones y contenidos. (Nunca uses cosas como 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>