javascript - Multiple showhide divs with separate toggle - Stack Overflow

admin管理员组

文章数量:1289845

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=".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>

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./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/8pyovyqn/3/

Any help is appreciated.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 9, 2018 at 6:55 rrk 15.9k44 gold badges3030 silver badges4747 bronze badges asked Apr 9, 2018 at 6:49 PravinPravin 16711 gold badge33 silver badges1010 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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./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>

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./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>

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();
    });
});

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/8pyovyqn/28/

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...

本文标签： javascriptMultiple showhide divs with separate toggleStack Overflow