Toggle Multiple divs for show hide

Question

ok, So I have multiple divs(7) which I want to toggle for show hide. If one div is open rest should hide and when I open a new div the others should hide. I have been able to accomplish this with the below piece of jquery

function showDivs() {
    $(".head").click(function() {
        $(".Content").hide();
        $(this).next().fadeIn("slow");

    })
}

where .head is the header for each div and .Content is the class for divs. I have got it working perfectly, by calling showDivs() from .head() Now the question is that on the left hand side of my page, I have ul li set. I have 7 li items, that correspond to 7 divs. I mean on click of first li the corresponding div should open up and the others should hide, and on click of 2nd li the 2nd div should open up and the others hide.

Does anybody have an idea how to make these divs show hide on the action of li items on left. I know I have to pass parameters for showDivs() , but don't know how?

help is appreciated

Answer 1

I believe this is where .index() comes into play:

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e) {
            var i = $(this).index();
            $('div').hide();
            $('div:eq('+i+')').show();
        });
    });
});

That's a pretty basic markup but I'm sure you can work out how to get it working with your code. Hope I helped!

http://jsfiddle.net/Z3Hj7/

EDIT : After having seen your fiddle I think i worked out exactly what you want:

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e){
            e.preventDefault();
            var i = $(this).index();
            $('.content').hide();
            $('.head:eq('+i+')').next().show();
        }); 
    });
});

Take a look at the fiddle: http://jsfiddle.net/DTcGD/25/

Answer 2

you can show and hide multiple divs by using this simple method

function w3_open() { 
     document.getElementById("id01").style.display = 
    "block"; document.getElementById("id02").style.display = "block"
     }

make sure that you are using w3.css

<button onclick="w3_open()" class="w3-button w3-opacity w3-black">Yesterday</button>
<div id="id01" class="w3-panel w3-white w3-card w3-display-container">
<span onclick="document.getElementById('id01').style.display='none'" 
    class="w3-button w3-display-topright">&times;</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div id="id02" class="test w3-panel w3-white w3-card w3-display- 
 container">

<span onclick="document.getElementById('id02').style.display='none'" 
    class="w3-button w3-display-topright">&times;</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>

Answer 3

How about asigning an id to each list item and a corosponding id to each item container. So your list items get an id of "item01".."item07" and your content containers gets id of "item01c".."item07c". Then you can do somehing like this:

$("li").click(function() {
    showDivs($(this).attr("id"));
})

function showDivs(callerId) {
  $(".content").hide();
  $(".content", "#" + callerId + "c").fadeIn();  
}

Working example can be seen here: http://jsfiddle.net/ECbkd/5/ 1

Answer 4

If I understand your HTML structure correctly, it looks about like this:

<!-- The list... -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
  <div class="head">Header One</div>
  <div class="Content">Content One</div>
  <div class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

...only with seven items rather than four.

If so, this would do it ( live copy ):

jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#container div.head:eq(" + $(this).index() + ")"));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

There, I'm relating the list to the headers implicitly, by where they are in their container. So the first li relates to the first div with class="head", the second to the second, etc. I'm doing that by using index to know which li was clicked, and then looking up the related div.head using :eq .

Doing it structurally rather than with id values makes it much easier to maintain. Alternately, though, you could do it by giving each li a data-div attribute with the value of the id of the related div:

<ul>
  <li data-div="h1">One</li>
  <li data-div="h2">Two</li>
  <li data-div="h3">Three</li>
  <li data-div="h4">Four</li>
</ul>
<div id="container">
  <div id="h1" class="head">Header One</div>
  <div class="Content">Content One</div>
  <div id="h2" class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div id="h3" class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div id="h4" class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

Then ( live copy ):

jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#" + $(this).attr("data-div")));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

data-* attributes are valid as of HTML5, but all browsers support them right now. (The data-* thing is an attempt to codify and reign in people's use of invalid attributes, by giving them a valid way to do it without conflicting with future additions to the spec.)

Answer 5

If you want to use .index() as suggested by someone earlier, then I belive this would be the simplest approach (check it out here http://jsfiddle.net/ECbkd/7/ ):

$("li").click(function() {
    $(".content").hide();
    $('.item').eq($(this).index()).children('.content').fadeIn();
})

You could add this to be able to show content when clickin on header also:

$("h2", ".container").click(function() {
    $(".content").hide();
    $(this).parent().children('.content').fadeIn();
})

* EDIT START * To let content toggle on click at header use this:

$("h2", ".container").click(function() {
    $(".content").not($(this).parent().children('.content')).hide();
    $(this).parent().children('.content').toggle();
})

Updated code here http://jsfiddle.net/ECbkd/8/ * EDIT END *

This is based on html like this:

<ul>
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
    <li>Item 06</li>
    <li>Item 07</li>
</ul>
<div class='container'>
    <div class='item'>
        <h2>Header 1</h2>
        <div class='content'>Content 1</div>        
    </div>        
    <div class='item'>
        <h2>Header 2</h2>
        <div class='content'>Content 2</div>       
    </div>
    <div class='item'>
        <h2>Header 3</h2>
        <div class='content'>Content 3</div>       
    </div>
    <div class='item'>
        <h2>Header 4</h2>
        <div class='content'>Content 4</div>       
    </div>
    <div class='item'>
        <h2>Header 5</h2>
        <div class='content'>Content 5</div>       
    </div>
    <div class='item'>
        <h2>Header 6</h2>
        <div class='content'>Content 6</div>       
    </div>
    <div class='item'>
        <h2>Header 7</h2>
        <div class='content'>Content 7</div>       
    </div>

</div>

Answer 6

If you give the li's and the corresponding divs the same class , then you can say something like

function showDivs() {
$("li").click(function() {
    $(".Content").hide();
    clickedID = $(this).attr("class");
    $('div#'+clickedID).fadeIn("slow");

})

}