CODEWITHSUNDEEP
javascripthtmljquerycss
Bernhard
Bernhard

Reputation: 25

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>

Upvotes: 2

Views: 443

Answers (3)

Justinas
Justinas

Reputation: 43441

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>

Upvotes: 3

Michele Giammarini
Michele Giammarini

Reputation: 34

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>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

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>

Upvotes: 2

Related Questions