Hide/Show div not working

Question

Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.

  $('a.common').click(function() { var id = $(this).attr('href'); $(id).fadeIn('slow', function() { // Animation complete }); }); 

 <div id="container"> <div id="canvas"> <div id="nav"> <h2 id="title"> <i class="fa fa-sitemap"> </i> MENU</h2> <ul id="toggle"> <li> <div class="active border"> <a href="#div1" class="common">HOME</a> </div> </li> <li> <div> <span class="menu-icons fa fa-user"></span> <a href="#div2" class="common">ABOUT US</a> </div> </li> <li> <div> <a href="#div3" class="common">PORTFOLIO</a> </li> <li> <div> <a href="#">CONTACT</a> </div> </li> </ul> </div> <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a> <div id="div1">TEST ONE</div> <div id="div2">TEST TWO</div> <div id="div3">TEST THREE</div> </div> </div> 

Answer 1

The problem was that you had $('a.button') instead of $('a.common') You also want a css to hide the divs at the beginning. And also when you fade in a new div, you need to hide the current one.

 $('a.common').click(function() { var id = $(this).attr('href'); $("#divs div").hide(); $(id).fadeIn('slow', function() { // Animation complete }); }); 

 #divs div {display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="canvas"> <div id="nav"> <h2 id="title"> <i class="fa fa-sitemap"> </i> MENU</h2> <ul id="toggle"> <li> <div class="active border"> <a href="#div1" class="common">HOME</a> </div> </li> <li> <div> <span class="menu-icons fa fa-user"></span> <a href="#div2" class="common">ABOUT US</a> </div> </li> <li> <div> <a href="#div3" class="common">PORTFOLIO</a> </div> </li> <li> <div> <a href="#">CONTACT</a> </div> </li> </ul> </div> <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a> <div id="divs"> <div id="div1">TEST ONE</div> <div id="div2">TEST TWO</div> <div id="div3">TEST THREE</div> </div> </div> </div> 

Answer 2

The problem is in your jQuery selector:

//This ona means that you  are searching for tag a with class button
$('a.abutton').click(function() {})

//You should use:
$('a.common').click(function() {})

// Because your a tags has class 'common'

Answer 3

There was 2 problem

1. Your <div> tag is not closed properly in your <li>
2. Initially you are not hiding your div so it can be fade in once you click on it.

Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/

Answer 4

First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.

So hide them first. Then call fadeIn on click and at the same time hide the div present already.

 $(document).ready(function() { $('a.common').click(function() { hideAllDivs(); var id = $(this).attr('href'); $(id).fadeIn('slow', function() { // Animation complete }); }); var hideAllDivs = function() { $('#div1').hide(); $('#div2').hide(); $('#div3').hide(); } hideAllDivs(); $('#div1').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="canvas"> <div id="nav"> <h2 id="title"> <i class="fa fa-sitemap"> </i> MENU</h2> <ul id="toggle"> <li> <div class="active border"> <a href="#div1" class="common">HOME</a> </div> </li> <li> <div> <span class="menu-icons fa fa-user"></span> <a href="#div2" class="common">ABOUT US</a> </div> </li> <li> <div> <a href="#div3" class="common">PORTFOLIO</a> </div> </li> <li> <div> <a href="#">CONTACT</a> </div> </li> </ul> </div> <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a> <div id="div1">TEST ONE</div> <div id="div2">TEST TWO</div> <div id="div3">TEST THREE</div> </div> </div>