Question 11303 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to toggle multiple divs using jQuery

I have several divs which should be shown / hidden when the corresponding button is clicked. In the initial state all buttons and all divs are visible. When the first button is clicked, only the corresponding div should be visible. When the second button is clicked, the corresponding div should be visible as well etc. The click on a button should toggle the state of the button and the corresponding div.

I’m not sure if this can be realized without placing a cookie or local storage token. So far I’ve created the following code, which only allows me to deactivate the divs with one first click.

$(function() {
    $('.button').click(function(){
        $(this).toggleClass('inactive');
        $('#mydiv'+$(this).attr('target')).toggle();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>
Tags:

3

Answers


  1. 0

    You’d have to initially hide the divs and show the correct one when the right button is clicked.

    $(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('#mydiv' + $(this).attr('target')).toggle();
  });
});
    /*
  Hide all divs that have an id starting with "mydiv"
*/

div[id^="mydiv"] {
  display: none;
}

.active {
  background-color: green;
  color: white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>
    Login or Signup to reply.
  2. 0

    If you want to toggle only the button/div that you just clicked, first you have to reset previous state of all elements to initial (remove class inactive and show all divs) and only than toggle state.

    $(function() {
    $('input[type="checkbox"]').change(function() {
      let checked = $('input[type="checkbox"]:checked');
      $('.inactive').removeClass('inactive');
      
      if (checked.length == 0) {
        $('.subdiv').show();
        
        return;
      }
      
      $('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');

      $('.subdiv').hide();
      
      checked.each(function () {
        $('#mydiv' + $(this).val()).toggle();
      });
    });
});
    .inactive {
  color: red;
}

label input {
  display: none;
}

label {
  border: 1px solid gray;
  border-radius: 3px;
  padding: 2px 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label><input type="checkbox" value="1"/>Button 1</label>
  <label><input type="checkbox" value="2"/>Button 2</label>
  <label><input type="checkbox" value="3"/>Button 3</label>
</div>

<div id="mydiv1" class="subdiv">
  <p>Div 1</p>
</div>

<div id="mydiv2" class="subdiv">
  <p>Div 2</p>
</div>

<div id="mydiv3" class="subdiv">
  <p>Div 3</p>
</div>
    Login or Signup to reply.
  3. 0

    Have you to use a toggle or you can also solve it with a walk around?

    $(function() {
  $('.button').click(function() {
  $('.inactive').removeClass('inactive');
    $(this).toggleClass('active');
    $('.subdiv').show();
 
    $('.mydiv' + $(this).attr('target')).toggle();
  });
});
    /*
  Hide all divs that have an id starting with "mydiv"
*/

.active {
  background-color: green;
  color: white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" target="1">Button 1</button>
  <button class="button" target="2">Button 2</button>
  <button class="button" target="3">Button 3</button>
</div>

<div class="mydiv1" hidden>
  <p>Div 1</p>
</div>

<div class="mydiv2" hidden>
  <p>Div 2</p>
</div>

<div class="mydiv3" hidden>
  <p>Div 3</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search