Basic tab navigation is not working in HTML

Question

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>

Answer 1

• First and foremost, stop using inline on* JS attribute handlers. JS should be in one place only, and that's the respective tag or file.
• Use data-* attribute to store a selector target ID like: data-social="#fb"
• Use just 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>

Answer 2

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>