CODEWITHSUNDEEP
jqueryhtmlcssshow-hideslidetoggle
yves p
yves p

Reputation: 31

slideToggle with two div's

I have little problem with the slidetoggle: I have 2 divs :

<div class="slidingDiv"></div>
<div class="slidingDiv2"></div>

and 2 buttons :

<a href="#" class="show_hide2">Butt2</a>
<a href="#" class="show_hide">Butt1</a>

if I click on Butt1 it opens slidingDiv // ok if I click again it close slidingDiv // ok

it's also working with Butt2

BUT, i want, if slidingDiv is already open, and if I click on Butt2, it opens slidingDiv2 AND it close slidingDiv, and if slidingDiv2 is already open, and if I click on Butt1, it opens slidingDiv AND it close slidingDiv2.

I think, I must use hasClass, removeClass and addClass but I don't know how to do

Thank's for your help

Yves

the code :

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });

    $(".slidingDiv2").hide();
    $(".show_hide2").show();

    $('.show_hide2').click(function(){
         $(".slidingDiv2").slideToggle();
    });
});

Upvotes: 0

Views: 3508

Answers (5)

Arul
Arul

Reputation: 491

Fiddle : http://jsfiddle.net/Es32W/1/

HTML :
-----------------------------------------
<input type="button" value="Slide1" class="slide1">
<input type="button" value="Slide2" class="slide2">
<div class="slideDiv1 aa">Slide 1</div>
<div class="slideDiv2 noDisplay">Slide 2</div>

JQuery :
------------------------------------------

$( document ).ready(function() {

$(".slide1").click(function(){    
    if($(".slideDiv1").hasClass("noDisplay")){
       $(".slideDiv1").removeClass("noDisplay").show("slide");
       $(".slideDiv2").addClass("noDisplay").hide("slide");       
    }    
  });

$(".slide2").click(function(){    
    if($(".slideDiv2").hasClass("noDisplay")){
       $(".slideDiv2").removeClass("noDisplay").show("slide") ;
       $(".slideDiv1").addClass("noDisplay").hide("slide");       
    }

  });
});

CSS
---------------------------------------------
.slideDiv1, .slideDiv2 {
    width:200px; height:200px; color:#fff;
}

.slideDiv1 {
    background-color:red;
}

.slideDiv2 {
    background-color:blue; display:none;
}
/*.noDisplay { display:none; }*/

Upvotes: 0

Marek Dovina
Marek Dovina

Reputation: 394

You can try to do something like this. One button which Toggle two different divs at once. Just as starting point you should have one of them hidden and another one visible. 

$('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    $(".slidingDiv2").slideToggle();
});

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28437

See this demo fiddle: http://jsfiddle.net/u6jB8/

Markup:

<div class="wrap">
    <a href="#" class="show_hide">Butt2</a>
    <div class="slidingDiv">div 1</div>
</div>

<div class="wrap">
    <a href="#" class="show_hide">Butt1</a>
    <div class="slidingDiv">div 2</div>
</div>

JQuery:

$('a.show_hide').on("click", function() {
    /* stop currently running animation if any, and hide all divs */
    $('div.slidingDiv').stop().slideUp('fast');

    /* stop currently running animation if any, and toggle corresponding div */
    $(this).next('div.slidingDiv').stop().slideToggle('fast');
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Try

<a href="#" class="show_hide" data-target=".slidingDiv">Butt2</a>  
<a href="#" class="show_hide" data-target=".slidingDiv2">Butt1</a>

<div class="slidingDiv slider">slidingDiv</div>
<div class="slidingDiv2 slider">slidingDiv</div>

then

$(document).ready(function () {
    //all target div's which has to be toggled has the class slider
    var $sliders = $(".slider").hide();
    //all anchors which has to trigger the slide has the class show_hide and has a data-* property data-target whose value is the selector to find the target div
    $(".show_hide").show();

    $('.show_hide').click(function () {
        var $target = $($(this).data('target'));
        $sliders.not($target).stop(true, true).slideUp();
        $target.stop(true, true).slideToggle();
    });
});

Demo: Fiddle

Upvotes: 1

zzlalani
zzlalani

Reputation: 24384

Try this

$(document).ready(function(){

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

    $('.show_hide').click(function(){
       $(".slidingDiv").slideToggle();
       $(".slidingDiv2").slideUp(); // add this line
    });


    $(".slidingDiv2").hide();
    $(".show_hide2").show();

    $('.show_hide2').click(function(){
       $(".slidingDiv2").slideToggle();
       $(".slidingDiv").slideUp(); // and this line
    });

});

Upvotes: 0

Related Questions