Toggle multiple divs one by one jquery

Question

What i am trying to do is toggle between different div's. It's kinda hard to explain but i'll give it a try.

When the page loads there would be div that is visible and 4 with display:none. And there would be a menu. link 1 would show the first div and hide all others. Then when clicking link 2 the div that is visible will hide and div2 would show. When clicking link 3 the div that is visible will hide and div3 would show and so on. Basically only one div shown at a time.

I wrote this but it works only when there are 2 divs.

$(function () {
  $('#link').click(function () { 
    $('#div1, #div2').toggle();
  });
});

but this would only show the hidden div and hide the one that is shown.

Okay, i did it and found out that it can be done much easier. Here's what i did. It's not very elegant but it works.

$(document).ready(function () {
  $('.slidingDiv').hide();
  $('.show_hide').show();

  $('.show_hide').click(function () {
    $('.slidingDiv').slideToggle();
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv2').hide();
  $('.show_hide2').show();

  $('.show_hide2').click(function () {
    $('.slidingDiv2').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv3').hide();
  $('.show_hide3').show();

  $('.show_hide3').click(function () {
    $('.slidingDiv3').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv4').hide();
  $('.show_hide4').show();

  $('.show_hide4').click(function () {
    $('.slidingDiv4').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function(){
  $('.slidingDiv5').hide();
  $('.show_hide5').show();

  $('.show_hide5').click(function () {
    $('.slidingDiv5').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
  });
});

And <a href="#" class="show_hide"><span class="nav">link</span></a>

pimvdb · Accepted Answer · 2012-09-02T14:25:23.867

7

If you define your links as follows:

<a href="#" data-toggle="#div1">link 1</a>
<a href="#" data-toggle="#div2">link 2</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>

Then you can make things easy: http://jsfiddle.net/A8Ymj/.

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding selector from data-toggle
  $("div").hide();
  $(selector).show();
});

edited Sep 02 '12 at 14:25

answered Sep 02 '12 at 14:18

pimvdb

151,816
78
307
352

If im not wrong this would show the next div, right? What if i click on the fourth link and then the third one? – Nikolay Petrov Sep 02 '12 at 14:22
Okay, i tried doing it, i failed. I even copy pasted all of the content from jsfiddle and still i can't get it to work. Any clue? – Nikolay Petrov Sep 02 '12 at 14:51
@user1623157: Just to make sure - the jsFiddle works and is what you want? – pimvdb Sep 02 '12 at 14:52
this is great @pimvdb, tysir – cpk Dec 01 '15 at 08:56

score 3 · Answer 2 · answered Sep 02 '12 at 14:55

jsFiddle Demo

HTML:

<a href='#' class='link'>link 1</a>
<div id='#div1' class='panel active'> Visible </div>
<a href='#' class='link'>link 2</a>
<div id='#div1' class='panel'> Visible </div>
<a href='#' class='link'>link 3</a>
<div id='#div1' class='panel'> Visible </div>

CSS:

div.panel { display:none; }
div.panel.active { display:block; }

JS:

$(function()   {
    $(".link").click(function(e) {
        e.preventDefault();
        $('div.panel:visible').hide();
        $(this).next('div.panel').show();
    });
});

score 0 · Answer 3 · answered Sep 02 '12 at 14:24

I would create a link between the ID of the link and the div:

$(".link").click(function() {

    var idIndex = parseInt(this.attr("id")); // Extracts the number of the ID
    $(".divs").hide();
    $("#div" + idIndex).show();

});

So you basically hide all the divs first and then display the one that corresponds to the ID that was clicked. This is not noticeable for the user. So instead of toggling based on current status. Think of it as toggling all off, and then toggle the one you want on.

score 0 · Answer 4 · answered Apr 22 '20 at 21:58

This might help you to toggle n number of divs'.

**$(document).ready(function(){
        $("a[data-toggle]").on("click", function(e) {
          e.preventDefault();  // prevent navigating
          var selector = $(this).data("toggle");  // get corresponding selector from data-toggle
          //alert(selector);
          $(selector).fadeIn(1000);
          $(selector).siblings().hide();
        });
    });**

Toggle multiple divs one by one jquery

4 Answers4

Linked