Clever Geek Handbook

On click slidetoggle div, but hide others first - jQuery

I have a page, when the user clicks on the title, the following divs are displayed.

I want to tell somehow if any other divs: block are showing, then set them to show first.

I have the following ...

$('.office-title').click(function(){
     $(this).next('div').slideToggle();
     return false;
});

and my html markup as such ...

<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
+3


source to share


5 answers


</office>

is not a valid closure. Closing should be</div> 

<div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
      </div>
    <div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
    </div>
    <div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
    </div>

CSS

.office
{
    display: none;
}


and jquery:

$(function () {
    $('.office-title').click(function () {
        $(this).next('div').slideToggle();

        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
});

HERE YOU CAN CHECK

+15


source


This should do it: http://jsfiddle.net/gKgJ7/

$('.office-title').click(function(){
   $('.office').slideUp();
   $(this).next('div').slideToggle();
   return false;
});

Note:



This is not a valid closure:

<div class="office">sadasd</office>
   //---------------------^^^^^^^^----should be </div>
+1


source 


$('.office-title').click(function(){
     $(this).next('div').slideToggle();
     $(this).parent(".office-row").siblings().hide(); // this should help
     return false;
});
0


source


Try like below ... it will work ...

Fiddle: http://jsfiddle.net/RYh7U/83/

    $(document).ready(function () {
        $('.office-title').next('div').slideToggle();
        $('.office-title').click(function(){   
        $('.office-title').next('div').slideUp();
        $(this).next('div').slideToggle(); 
        return false;
        });
     });
0


source


This closes all open divs with animation and opens the required div

$('.office-title').click(function(){
     var that = $(this);
     if('.office').each(function() {
       if($(this) == $(that).next('div')) {
          $(this).slideToggle();
       }
       else {
          if($(this).css('display')!=='none') {
             $(this).slideToggle();
          }
       }
     });
     return false;
});
0


source






More articles:


All Articles