CODEWITHSUNDEEP
jqueryhtmlcsstoggle
ThomasCS
ThomasCS

Reputation: 717

Jquery multiple buttons for one toggle element

This is basicly the situation:

http://jsfiddle.net/thomascs/CfGYG/1/

I have an iframe, that loads different when clicking on different buttons. But all of these buttons are toggling that same iframe, but only the top one is working.

I would also like the animation to make the iframe untoggle and then retoggle when its already open, but a new link is clicked.

HTML:

<div id="wrapper">
    <div id="left">LINKSSSSS</div>
    <div id="menu"> 
        <span class="button" id="leftbutton">open left</span>
        <span class="button" id="rightbutton">open right1</span>
        <span class="button" id="rightbutton">open right2</span>
        <span class="button" id="rightbutton">open right3</span>
    </div>
    <div id="right">RECHTSSSS</div>
</div>

CSS:

    #menu {
    background:#eee;
    width:300px;
    height:400px;
    float:left;
}
#left {
    float:left;
    display:none;
}
#right {
    float:left;
    display:none;
}

JS:

$(document).ready(function () {
    $('#leftbutton').click(function () {
        $('#right').hide();
        $('#left').toggle();
    });
});
$(document).ready(function () {
    $('#rightbutton').click(function () {
        $('#left').hide();
        $('#right').toggle();
    });
});

!EDIT!

So the problem with the id instead of class selectors has been solved. I also managed to achieve the retoggle animation. I just need to get the toggle function back when I click on the same link twice.

As it is now: http://jsfiddle.net/thomascs/CfGYG/6/

Upvotes: 0

Views: 1790

Answers (2)

jjsquared
jjsquared

Reputation: 299

It looks like your buttons are not firing because you are using IDs rather than classes. IDs are unique per page. This is why only the first OPEN RIGHT button is firing, and not the other two. For something like a nav menu item that will be reused over and over, you should use class names.

I've modified your code to use "rightbutton" and "leftbutton" as classes rather than IDS and now it seems to be working as desired.

change <span class="button" id="rightbutton">open right1</span>

to <span class="button rightbutton">open right1</span>

and

<span class="button" id="leftbutton">open left</span>

to

<span class="button leftbutton">open right1</span>

See working demo below:

http://jsfiddle.net/bNVkG/

This has the fade effect. I've replaced toggle() with fadeIn() and fadeOut():

http://jsfiddle.net/HcRSm/

Upvotes: 0

Peter
Peter

Reputation: 16915

attribute id="" is unique. use class="" instead

Retoggling:

Upvotes: 4

Related Questions