Show/Hide multiple divs on click function

Question

http://jsfiddle.net/studioband/pG87G/6/ This link is apart of a website that I am designing. I have managed to get the show/hide and slide toggle working, you can see this when you click the 'project info' or 'subscribe' links.

The problem is that I need one div to close when the other is open with the same toggle animation. I want to keep it so when the relating title link eg. 'project info' it will close the revealed div as it is currently doing.

I have researched and have found posts with a similar issue but have not been successful in finding the right solution that works with jquery 1.7+.

Tats_innit · Accepted Answer · 2012-05-16T03:36:09.633

1

Hiya demo http://jsfiddle.net/PquXL/show or http://jsfiddle.net/PquXL/

I am using chaining here, This will help :) so now "one div to close when the other is open with the same toggle animation" Le me know if I missed anything.

Please avoid using 2 document ready, cheers!

Jquery code

/* PROJECT REVEAL DIV*/
/* SUBSCRIBE REVEAL DIV*/
$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $(".slidingDiv_subscribe").hide();
        $(".show_hide_subscribe").show();

    $('.show_hide').click(function(){
        //$(this).toggle();
        $(".slidingDiv_subscribe").slideUp();
        $(".slidingDiv").slideToggle();
    });


    $('.show_hide_subscribe').click(function(){
        //$(this).toggle();
         $(".slidingDiv").slideUp();
        $(".slidingDiv_subscribe").slideToggle();
    });



});

edited May 16 '12 at 03:36

answered May 16 '12 at 03:03

Tats_innit

33,991
10
71
77

Thank you so much for your help, you are a legend! Is there any way to slow down the animation for when one slides up then the other comes down? – studioband May 16 '12 at 04:26
Hiya @studioband glad it helped, **Do-not forget to accept the answer**, yes look into the `.delay()` API or there is delay API for `.slideUp and Down` as well: http://api.jquery.com/slideUp/ **and** http://api.jquery.com/delay/ **or** http://stackoverflow.com/questions/3833076/jquery-slideup-delay-then-slidedown-not-working , cheers! – Tats_innit May 16 '12 at 04:31

score 0 · Answer 2 · answered May 16 '12 at 02:57

0

Write a javascript function bound to your event.

Inside the function, get the id of the div elements you would like to hide/show and use it to do appropriate action.

answered May 16 '12 at 02:57

edocetirwi

542
5
22

Show/Hide multiple divs on click function

2 Answers2