Make multiple buttons hide and show in JavaScript

Question

So i have multiple buttons that is showing when it's clicked. But i'm having a hard time hiding the content if another button is clicked.

---

The Javascript code looks like this

function portFunction() {
    var e = document.getElementById("test2").style;
    if(!e.display | e.display == "none"){
        e.display = "block";
    }
else{
    e.display = "none";
    }
}

And the html

<nav>
     <ul>   
        <li onclick="portFunction();"><a href="#">Portfolio</a></li>
        <li onclick="blogFunction();"><a href="#">Blog</a></li>
     </ul>
    </nav>

How can i make it so if another button is clicked, it hides the content for the last button that was open and display the new button content?

EDIT Snippet code, ok so if you click on Portfolio some text will be displayed. But if you click on Blog some other text will be displayed, but the text from Portfolio will still be displayed. What i want is, if you click the Portfolio button and then the Blog button, the text from portfolio should go away. And i want this for every button.

 function blogFunction() { var e = document.getElementById("test").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } } function portFunction() { var e = document.getElementById("test2").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } }

 @import url(http://fonts.googleapis.com/css?family=Open+Sans); .center{ font: 100% open sans, sans-serif; margin:0; padding:0; } #test{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; right: 50%; } .testText{ color:red; z-index:11; } #test2{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; }

 <nav> <ul> <li class="current"><a href="#">Home</a></li> <li onclick="portFunction();"><a href="#">Portfolio</a></li> <li onclick="blogFunction();"><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Preview</a></li> </ul> </nav> <div class="center"> <div id="test"> <h1 class="testText"> Test </h1> </div> <div id="test2"> <h1 class="testText"> Test2 </h1> </div> </div>

Answer 1

A simpler way to do this would be to use classes and jQuery's eq() something like this:

 $('.section-link').click(function() { var cur = $('.section-link').index($(this)); // get the index of the clicked link $('.section-display').removeClass('active'); // hide all of the sections $('.section-display').eq(cur).addClass('active'); // show the section at the same index of the clicked link });

 .section-display:not(.active) { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li class="section-link"><a href="#">Portfolio</a> </li> <li class="section-link"><a href="#">Blog</a> </li> </ul> </nav> <br> <br> <div class="section-display active">Section One</div> <div class="section-display">Section Two</div>

In response to your comment, Let's take the code line by line:

First, the CSS rule .section-display:not(.active) { display: none; } .section-display:not(.active) { display: none; } hides every element that has the class section-display , unless it also has the class active . This makes all of the divs hidden but allows you to add the class active if you want a particular section to be shown by default.

In the jQuery, $('.section-link').click(function() { }); is a click handler. Basically, it says when someone clicks on an element that has the class section-link , run the code in this block

Inside the handler, the variable $(this) refers to a jQuery object that represents the element that was clicked (in your case a link).

The first line, var cur = $('.section-link').index($(this)); says, gather all of the elements that have the class section-link (all of you links) into an array and give me the index of the one that was clicked. So now we know that the user clicked the 2nd link for example.

The next line $('.section-display').removeClass('active'); removes the class active from all of the divs that have the class section-display which hides all the divs because of the css rule

On the next line $('.section-display').eq(cur).addClass('active'); , $('.section-display') gathers all of the divs that have the class section-display into an array (these are the divs with the content). After that .eq(cur) selects the div from the array that is at the same index as the link that was clicked. And finally .addClass('active') adds the class active to the element which displays the4 element because of the css rule.

So now, clicking on the first section-link element will show the first section-display div and hide all others. Clicking on the second section-link element will show the second section-display div and hide all others. And so on...

Answer 2

I added a callLastFunc() function, it saves and calls previous function, to hide the content added by previous function call.

 var lastCalled = null; function callLastFunc(arg) { if (arg[0]) return; if (lastCalled) lastCalled("byCallPrev"); lastCalled = arg.callee; } function blogFunction() { var e = document.getElementById("test").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } callLastFunc(arguments); } function portFunction() { var e = document.getElementById("test2").style; if(!e.display | e.display == "none"){ e.display = "block"; } else{ e.display = "none"; } callLastFunc(arguments); }

 @import url(http://fonts.googleapis.com/css?family=Open+Sans); .center{ font: 100% open sans, sans-serif; margin:0; padding:0; } #test{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; right: 50%; } .testText{ color:red; z-index:11; } #test2{ display:none; height:20%; width:20%; z-index:11; position:absolute; left:50%; }

 <nav> <ul> <li class="current"><a href="#">Home</a></li> <li onclick="portFunction();"><a href="#">Portfolio</a></li> <li onclick="blogFunction();"><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Preview</a></li> </ul> </nav> <div class="center"> <div id="test"> <h1 class="testText"> Test </h1> </div> <div id="test2"> <h1 class="testText"> Test2 </h1> </div> </div>

Answer 3

Hmm, you would be better to use a framework, but this is what you want right? This example make use of vanillaJS Framework, which is very powerful out of the box ;)

 // lib.js sitesContent = {}; // blog.js sitesContent['blog'] = "Blog content"; // You can use templates like handlebars // portfolio.js sitesContent['portfolio'] = "Portfolio content"; // Better to use templates // app.js function navAction(site) { document.getElementById('content').innerHTML = sitesContent[site]; } navAction('portfolio'); // Means load portfolio when loaded first time

 <nav> <ul> <li><a onclick="navAction('portfolio')" href="#">Portfolio</a></li> <li><a onclick="navAction('blog')" href="#">Blog</a></li> </ul> </nav> <div id="content"></div>