CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
grizzly
grizzly

Reputation: 3

selection/active class for show/hide divs

So I have this thing where I need one div to be shown at any one time depending on the button clicked. I found this great fiddle which is almost perfect except for the fact that it doesn't show when one link is selected. I'd like to have it so that the link that's selected can have a sort of active class or look different from the other links. Is that possible? I've been looking through questions and I can't really find an answer for this.

If anyone's interested, I'm using it for this (but the code is really messed up, sorry). (I'd also like to change the filter buttons on the top row to reset and filter all the images, but am aware that's a different question. Still any help would be appreciated!)

html

<div id="linkwrapper">
    <a id="link1" href="#">link1</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
</div>

<div id="infocontent">
    <div id="link1content">Information about 1.</div>
    <div id="link2content">Information about 2.</div>
    <div id="link3content">Information about 3.</div>
</div>

jquery

$(document).ready(function(){

    $("#infocontent").hide();
    $("#infocontent div").hide();


    $('#linkwrapper a[id]').click(function(){

        var vsubmen = this.id +"content";  

        if( $("#infocontent").is(":visible") == false ) {
            $("#" + vsubmen).show('fast',function() {
                $("#infocontent").slideDown();
            });
        } else if ( $("#" + vsubmen).is(":visible") == false ) {
            $("#infocontent").slideUp('slow',function(){
                $("#infocontent div").hide();
                $("#" + vsubmen).show();
                $("#infocontent").slideDown('slow');    
            });
        } else {
            $("#infocontent").slideUp('slow',function(){
                $("#infocontent div").hide();
            });
        }
        return false;
    });

});

Upvotes: 0

Views: 1103

Answers (1)

cssyphus
cssyphus

Reputation: 40106

You can simplify that fiddle like this:

$('a[id^=link]').click(function(){
    $('a[id^=link]').removeClass('meactive');
    $(this).addClass('meactive');

    $('#infocontent>div').slideUp();

    var tmp = this.id;
    $('#'+tmp+'content').slideDown();
}); //end a.click

jsFiddle Demo

Notes:

(1) $('a[id^=link]') -- grabs all a elements with a ID that starts with link

(2) $('#' +tmp+ 'content') -- builds selectors like: $('#link3content)`

Upvotes: 1

Related Questions