CODEWITHSUNDEEP
javascriptjquery
Keith
Keith

Reputation: 4147

jQuery show hide multiple links slide toggle div

I have a question about toggle effects. I have managed to be able to toggle the same div which is my goal, my problem is I want to add in the effect that say if (toggle1) is on and I click on toggle2, it will close toggle one and open toggle 2. Right now, if you click on any toggle it just opens and closes the toggle based on the state it is in. I want to be able to switch whatever is in the div when clicking on a different toggle. I hope this makes sense. http://jsfiddle.net/nbh2w/

HTML

<div>
<a href="#" id="toggle3">Slide Toggle3</a><br /><br />
<a href="#" id="toggle4">Slide Toggle4</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
 </div>

JS

    $(function() {
    $('#toggle4').click(function () {
    $('.toggle').slideToggle('1000');

    return false;
        });
});

    $(function () {
    $('#toggle3').click(function () {
    $('.toggle').slideToggle('1000');

    return false;
        });
});

Upvotes: 0

Views: 2688

Answers (3)

root
root

Reputation: 1583

i'm not exactly sure what you're trying to achieve but based on my understanding, this might be what you want. Slide Toggle3

Slide Toggle4

 </div>


    $(function() {
    $('#toggle4').click(function () {
        $('.toggle').hide('1000');
        $('.toggle').text('toggle 4 clicked');
    $('.toggle').slideToggle('1000');

    return false;
        });
});

    $(function () {
    $('#toggle3').click(function () {
        $('.toggle').hide('1000');
         $('.toggle').text('toggle 3 clicked');
    $('.toggle').slideToggle('1000');

    return false;
        });
    });

http://jsfiddle.net/rNqd5/

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

You need some thing like this ?

  $('#toggle4').click(function () {
               $('.toggle').hide();
                $('.toggle').slideToggle('1000');
                 return false;
                });

Try it

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

You can use an instance of this, also, you're going to need two div's for each link:

<a href="#" id="toggle3">Slide Toggle3</a>
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

<br><br>

<a href="#" id="toggle4">Slide Toggle3</a>
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

You should also use a class for your links, but I just comma separated the ID's

$("#toggle3, #toggle4").click(function() {
    $(this).next(".toggle").slideToggle("slow");
});

Demo: http://jsfiddle.net/nbh2w/2/

Upvotes: 0

Related Questions