CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mridul Joshi
Mridul Joshi

Reputation: 13

How to make next div open when previous closes using jquery?

I have tried so far and made some pretty long code. This seems okay when one is having less then five or ten divs. But what if these are to be implemented on 20 or more than that....?

Can there be any compact form of the code I have tried to write.

( I am some novice in jquery to build complex function but try to write these sorts. )

Any one can help..?

Fiddle is here : http://jsfiddle.net/Ud574/27/

The Code is as follows.

      $(document).ready(function(){

      $('.button').click(function() {
      $('.content').hide(500)
  $('.headOne').addClass("classRight");
 $('.content1').show(500)
 });
     $('.button1').click(function() {
     $('.content1').hide(500)
 $('.headTwo').addClass("classRight");
 $('.content2').show(500)
 });

 $('.button2').click(function() {

     $('.content2').hide(500)
 $('.headThree').addClass("classRight");
 $('.content3').show(500)
 });
 $('.button3').click(function() {

     $('.content3').hide(500)
 $('.headFour').addClass("classRight");

    $('.buttonLast').click(function() {
    $('.content').show(500)
 $('.headOne,.headTwo,.headThree, .headFour').removeClass("classRight");});
});

   });

       <doctype html>
        <html>
        <head>
        <title> div collapse</title>
        </head>
        <body>


   <div class="headOne"> Emplyee personal record</div>
   <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum <br />
    <div class="button">Click me</div> 
   <br />
   </div>
  <div  class="headTwo"> Emplyee personal record</div>
   <div class="content1">Pellentesque felis elit, tempor vitae dapibus facilisis, sollicitudin id diam.  <br />
  <br />
  <div class="button1">Click me</div>
  </div>
  <div  class="headThree"> Emplyee personal record</div>
  <div class="content2">Aliquam  id lectus pellentesque viverra<div class="button2">Click me</div></div> 
   <div  class="headFour"> Emplyee personal record</div>
   <div class="content3">Aliquam a magna ac lacus eget porta. Maecenas viverra mi id lectus pellentesque viverra</div>
  <div class="button3">Click me</div><br />
 <br />
  <div class="button4">Go To Previous section </div></div>


  <div class="buttonLast">Go To Previous section </div>




    </body>
  </html>

Upvotes: 1

Views: 493

Answers (2)

Webomatik
Webomatik

Reputation: 836

I played with your code a bit and simplified it a lot, using built-in jQuery functions. Here's the HTML:

    <div class="closable"> Employee personal record
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum ullamcorper convallis.
</div></div>
<div  class="closable"> Employee personal record
<div class="content">Pellentesque felis elit, tempor vitae dapibus felis eu erat. <br />
</div></div>
<div  class="closable"> Employee personal record
<div class="content">Aliquam eget porta. Maecenas viverra mi id lectus pellentesque viverra</div></div> 
<div  class="closable"> Employee personal record
<div class="content">Aliquam a magna ac justo accumsan porttitor.</div></div>
<div class="button4">Go To Previous section </div></div>

Here's the Javascript:

$(document).ready(function(){
$('.content').first().show();
$('.closable').click(function() {
if ($(this).find('div').first().is(':visible')){
    $(this).find('div').first().hide();
    $(this).next().find('div').first().show();
}else{
    $(this).find('div').first().show();
}
});

});

And the CSS:

.content{display:block;}
.content{font-weight: normal; border: 0;display:none;}
.closable{font-weight:bold;border:1px solid #CCC;}

Hope this helps!

Upvotes: 0

svlada
svlada

Reputation: 3288

If I understand correctly, you need something similar to the Accordion control.

Have a look at jQuery UI Accordion on the following url: http://jqueryui.com/accordion/

Does this sound reasonable to you?

Upvotes: 2

Related Questions