Question

162

On click slidetoggle div but hide others first - jQuery

rated 0 times [ 165] [ 3] / answers: 1 / hits: 42464 / 12 Years ago, tue, february 12, 2013, 12:00:00

I have a page that when a user clicks a title, the following div toggles display.

I want to somehow say if any other divs are display:block then set them to display none first.

I have the following...

$('.office-title').click(function(){

     $(this).next('div').slideToggle();

     return false;

});

and my html markup is 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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

louiseb

Add To Favorites

Follow

Total Points: 368

Total Questions: 107

Total Answers: 107

Location: Tanzania

Member since Wed, Feb 24, 2021

3 Years ago

answered 12 Years ago myakylas · Accepted Answer

</office> is not a valid closing. The 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