Multiple show/hide divs with separate toggle

Question

I have been trying to create multiple divs which should be hidden at page load. The div should be shown if the corresponding button is clicked and should hide if the same button is clicked again. Also if one of the divs is being shown and another button is clicked, then the div corresponding to that button should show up. If the same button is clicked again then the div should hide. I have followed a thread on SO for the same and am able to show divs corresponding to button click but the toggle functionality is not working.

Please find the fiddle :

 jQuery(function() { jQuery('.showSingle').click(function() { jQuery('.targetDiv').hide(); jQuery('#div' + $(this).attr('target')).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> </div> <div id="div1" class="targetDiv">Lorum Ipsum1</div> <div id="div2" class="targetDiv">Lorum Ipsum2</div> <div id="div3" class="targetDiv">Lorum Ipsum3</div> <div id="div4" class="targetDiv">Lorum Ipsum4</div> 

https://jsfiddle.net/8pyovyqn/3/

Any help is appreciated.

Answer 1

You can use toggle to achieve what you need:

 jQuery(function(){ jQuery('.showSingle').click(function(){ var target = $(this).attr('target'); $('#div'+target).toggle('.hide'); }); }); 

 .targetDiv{ display: none; } .hide{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> </div> <div id="div1" class="targetDiv">Lorum Ipsum1</div> <div id="div2" class="targetDiv">Lorum Ipsum2</div> <div id="div3" class="targetDiv">Lorum Ipsum3</div> <div id="div4" class="targetDiv">Lorum Ipsum4</div> 

Answer 2

Try the below jQuery code, Replace this code with your jQuery code and check functionality it will work. The toggle function is used to toggle for hide and show the element.

jQuery(function(){
    jQuery('.targetDiv').hide();
    jQuery('.showSingle').click(function(){              
          jQuery('#div'+$(this).attr('target')).toggle();
    });
});

Answer 3

First of all set display attribute of all divs to none:

<div class="buttons">    
    <a  class="showSingle" target="1">Div 1</a>
    <a  class="showSingle" target="2">Div 2</a>
    <a  class="showSingle" target="3">Div 3</a>
    <a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

Then toggle div like below:

jQuery(function(){
       jQuery('.showSingle').click(function(){      
           $('.targetDiv').not('#div' + $(this).attr('target')).hide();        
           $('#div'+$(this).attr('target')).toggle();
       });
   });

You can do like below fiddle to achieve that: https://jsfiddle.net/8pyovyqn/28/

Answer 4

So many answers already, but I think none of them work the way @Pravin wants it to work.

So here is my suggestion:

jQuery(function(){
    jQuery('.showSingle').click(function(){
          var objdiv = $('#div'+$(this).attr('target'));
          var toggleDisplay = false;
          if(objdiv.css('display')=="none"){
                toggleDisplay = true;
          }
          jQuery('.targetDiv').hide();
          objdiv.toggle(toggleDisplay);
    });
});

Fiddle here...

Answer 5

Use not to hide the all except clicked one and set style="display:none;" for all the div to hide them by default.

 $(function() { $('.showSingle').click(function() { $('.targetDiv').not('#div' + $(this).attr('target')).hide(); $('#div' + $(this).attr('target')).toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> </div> <div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div> <div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div> <div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div> <div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>