CODEWITHSUNDEEP
jquery
Mannuel
Mannuel

Reputation: 47

Click button to reveal & hide content based on which button is clicked

I have created two DIV's with 'Click me' buttons. When user clicks buttons a hidden DIV slides up and down. (I have used the .slideToggle(); method)

I need the DIV's to slide up independently of each other and not at the same time as they currently do now.

please see demo here: http://jsfiddle.net/manidf/AetnV/

I have looked around for answers found these but not much help, http://bit.ly/fMn4JM and http://bit.ly/fuwA2U

Any help or pointers in the right direction would be greatly appreciated Thanks Manny

Upvotes: 0

Views: 1549

Answers (3)

Krule
Krule

Reputation: 6476

Here it is:

http://jsfiddle.net/AetnV/72/

Upvotes: 1

Louis Fellows
Louis Fellows

Reputation: 544

They're both happening because you're telling them both to pop up (as $(".main_image .block").slideToggle(); matches both sliding elements)

This should fix it as it selects only the sliding panel after the clicked link.

$(document).ready(function() {

    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity


    //Toggle Teaser
    $("a.collapse").click(function(){
        $(this).next().slideToggle();
        $(this).toggleClass("show");
    });


});//Close Function

Upvotes: 0

nialljsmith
nialljsmith

Reputation: 474

You're click event handler tells the class main_image to slide.

$(".main_image .block").slideToggle();

given that both your divs have the main_image class, they will act the same when either button is clicked.

Upvotes: 0

Related Questions