-2

I did not want to ask this question, but after searching the related articles in here, I have to. My code has 7 nav links all with the same class, and because the html is quite long, I want to be able to hide contents until the link is clicked, and also have the content disappear when another nav link is clicked; allowing space for the next. I would prefer the answer in vanilla js, as that is what i am learning now. Here is a link to my pen please: Codepen

   <ul>
  <a href="#Hello_World" class="nav-link" onclick='myFunction()'>
    <li>Hello World</li>
  </a>
  <a href="#Introducing_JSX" class="nav-link">
    <li>Introducing JSX</li>
  </a>
  <a href="#Rendering_Elements" class="nav-link">
    <li>Rendering Elements</li>
  </a>
  <a href="#Components_and_Props" class="nav-link">
    <li>Components and Props</li>
  </a>
  <a href="#State_and_Lifecycle" class="nav-link">
    <li>State and Lifecycle</li>
  </a>
  <a href="#Handling_Events" class="nav-link">
    <li>Handling Events</li>
  </a>
  <a href="#Thinking_in_React" class="nav-link">
    <li>Thinking in React</li>
  </a>

</ul>

Here is an example of my nav bar.

Disclaimer: I am totally a js beginner. Thanks for your patience and time.

Asiya Fatima
  • 1,388
  • 1
  • 10
  • 20
saas_joel
  • 320
  • 3
  • 11

1 Answers1

0

I am using this tutorial as a guide.

CSS

.tabcontent{display:none}

HTML

<ul>
    <li>
        <button id="default" class="tablinks" onclick="myFunction('helloWorld')">Hello World</button>
        <div id="helloWorld" class="tabcontent">
            <ul><li>1</li><li>2</li><li>3</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('jsx')">JSX</button>
        <div id="jsx" class="tabcontent">
            <ul><li>Intro JSX</li><li>Intro JSX 2</li></ul>
        </div>
    </li>
    <li>
        <button class="tablinks" onclick="myFunction('react')">React</button>
        <div id="react" class="tabcontent">
            <ul><li>intro raect 1</li><li>intro react 2</li></ul>
        </div>
    </li>
</ul>

JS

function myFunction(id){
    var i, tabcontent;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(id).style.display = "block";
}

document.getElementById("default").click();
Qrazier
  • 162
  • 4
  • 15
  • Thank you so much for your time Qrazier. I am going to play around with this. But quick question, I was wondering if LInks could be used rather than the proposed buttons in your code example and turorial. Also the ending part of the js file from the tutorial says: // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } Does this mean that I still have to specify an id for each link to get this working completely. Thanks – saas_joel Mar 22 '19 at 17:25
  • @Alara_stealth Well, if you want both the onclick and href run you can check this [SO answer](https://stackoverflow.com/a/14867603/6255049). And yes, you need to specify the ID in the function ex: myFunction('helloWorld') where the ID is helloWorld and will target the specific div with the proposed ID. Hope this help :) – Qrazier Mar 25 '19 at 01:44
  • Thanks, I got it super working already. Your help really paid off. – saas_joel Mar 25 '19 at 11:41
  • @Alara_stealth Nice. Glad it helps. You can accept my answer as an accepted answer for your question if it does what you want. Happy coding! – Qrazier Mar 26 '19 at 06:28