Effortlessly switch between multiple divs with jQuery

Question

Effortlessly switch between multiple divs with jQuery

I am working on a functionality where multiple divs should be displayed or hidden based on the button clicked. Initially, all buttons and divs are visible. Upon clicking a button, only the corresponding div should be visible. Subsequent clicks on other buttons should toggle the visibility of their respective divs as well. I am considering using cookies or local storage to achieve this feature, as my current code only allows me to deactivate the divs with the 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>

javascript html jquery css

Answer 1

Answer №1

To toggle only the button/div that was clicked, you must first reset the previous state of all elements to their initial state (remove the "inactive" class and show all divs), and then toggle the 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>

Answer 2

To toggle only the button/div that was clicked, you must first reset the previous state of all elements to their initial state (remove the "inactive" class and show all divs), and then toggle the 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>

Answer 3

Answer №2

To achieve the desired effect, start by hiding all the divs and revealing the correct one when the corresponding button is clicked.

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('#mydiv' + $(this).attr('target')).toggle();
  });
});

/*
  Ensure all divs with IDs starting with "mydiv" are hidden
*/

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>

Answer 4

To achieve the desired effect, start by hiding all the divs and revealing the correct one when the corresponding button is clicked.

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('#mydiv' + $(this).attr('target')).toggle();
  });
});

/*
  Ensure all divs with IDs starting with "mydiv" are hidden
*/

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>

Answer 5

Answer №3

Is it necessary to utilize a toggle function, or is there an alternative solution available?

$(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>

Answer 6

Is it necessary to utilize a toggle function, or is there an alternative solution available?

$(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>

Effortlessly switch between multiple divs with jQuery

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

An example of text that includes a link using ES6 template strings

The async function in Jasmine is causing issues with expectedAsync functionality

Executing window.open from Html.Actionlink in ASP.NET MVC 4

webstorm error: unresolved function or method when using npm azure-storage modules

Transferring canvas element via socket with JS stack size limit

I am currently in the process of conducting an automated test focused on the creation of a new Facebook account

Using Angular and Jade to pass an array from a controller to script tags

Toggle a Vue.js method to display responses for a particular question

Increase the div id using jQuery

Concealing or revealing an image with jQuery when hovering

`Take action on a row by selecting the Edit option in CodeIgniter`

The damping effect in three.js OrbitControls only activates when the mouse is pressed, however there is no damping effect once the

implementing conditional logic in angularjs expressions

The Material UI month picker interface is not displaying correctly

developing a sleek visual transition using CSS animation

Guiding users who have disabled JavaScript through redirection

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

leveraging JQuery plugins alongside Grails resources plugin

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such