jQuery可折叠div，折叠第二个div

Question

I'm a designer trying to find a fix to my jQuery collapsible div problem. (I'm new to jQuery, but I have a good handle on html and CSS). I can't seem to find exactly what I'm looking for in the forums, so I'm giving this a shot. Hopefully someone can help me out.

I have a panel with a header tab and 2 divs . I want the have the open/close trigger (with graphic) in the panel tab and have only the second div close when targeted. I wan the first div to always show, and the 2nd div is the options which I would like to open/close when selecting a button in the panel tab.

I'm using Ramin Hossaini collapsible div code as a starting point:

Here's the CSS :

h1 {
    margin-top:20px;
    margin-bottom:20px;
}

p {
    margin-bottom:10px;
}

.module {
    border:1px solid #ccc;
    width: 400px;
    margin-bottom:20px;
}

.module .header  {
    background-color:#efefef;
    padding-left:10px;
}

.module .header h1 {
    margin:0;
    display:inline;
    font-size:16px;
}

.module .content{
    clear:both;
    padding:10px;
}

.module .placeholder {
    margin-top:1px;
    margin-right:2px;
}

.module .expand {
    float:left;
    display:inline;
    background-image:url(../images/toggle-sprite.png);
    background-position: 0px -16px;
    width:16px;
    height:16px;
}   

.module .collapse {
    float:left;
    display:inline;
    background-image:url(../images/toggle-sprite.png);
    background-position: 0px 0px;
    width:16px;
    height:16px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

Here's my html:

<div class="panel module">

<div class="panelTab header">
    <h1>Header #1</h1>
</div>

<div class="content 1">
          <p>I want this content to always show.</p>
     </div>

<div class="content 2"> <!-- the 'content' class is only for styling -->
    <p>I want this panel to collapse and expand.</p>
</div>

</div>

And the jquery which I don't fully understand:

jQuery.collapsible = function(selector, identifier) {

//toggle the div after the header and set a unique-cookie
$(selector).click(function() {
    $(this).next().slideToggle('fast', function() {
        if ( $(this).is(":hidden") ) {
            $.cookie($(this).prev().attr("id"), 'hide');
                 $(this).prev().children(".placeholder").removeClass("collapse").addClass("expand");
        }
        else {
            $.cookie($(this).prev().attr("id"), 'show');
            $(this).prev().children(".placeholder").removeClass("expand").addClass("collapse");
        }
    });
    return false;
}).next();


//show that the header is clickable
$(selector).hover(function() {
    $(this).css("cursor", "pointer");
});

/*
 * On document.ready: should the module be shown or hidden?
 */
var idval = 0;  //increment used for generating unique ID's
$.each( $(selector) , function() {

    $($(this)).attr("id", "module_" + identifier + idval);  //give each a unique ID

    if ( !$($(this)).hasClass("collapsed") ) {
        $("#" + $(this).attr("id") ).append("<span class='placeholder collapse'></span>");
    }
    else if ( $($(this)).hasClass("collapsed") ) {
        //by default, this one should be collapsed
        $("#" + $(this).attr("id") ).append("<span class='placeholder expand'></span>");
    }

    //what has the developer specified? collapsed or expanded?
    if ( $($(this)).hasClass("collapsed") ) {
        $("#" + $(this).attr("id") ).next().hide();
        $("#" + $(this).attr("id") ).children("span").removeClass("collapse").addClass("expand");
    }
    else {
        $("#" + $(this).attr("id") ).children("span").removeClass("expand").addClass("collapse");
    }


    if ( $.cookie($(this).attr("id")) == 'hide' ) {
        $("#" + $(this).attr("id") ).next().hide();
        $("#" + $(this).attr("id") ).children("span").removeClass("collapse").addClass("expand");
    }
    else if ( $.cookie($(this).attr("id")) == 'show' ) {
        $("#" + $(this).attr("id") ).next().show();
        $("#" + $(this).attr("id") ).children(".placeholder").removeClass("expand").addClass("collapse");
    }


    idval++;
});

};

Answer 1

I wouldn't use that jQuery code at all, but rather a simpler one:

jQuery( function(){
    jQuery(".panel .panelTab").css("cursor","pointer").click( function(){
        if( jQuery(".panel .2").toggle().is(":visible")){
            jQuery(this).removeClass("collapse").addClass("expand");
        } else {
            jQuery(this).removeClass("expand").addClass("collapse");
        }
    });
});

Answer 2

I have used the following jquery:

$('#toggle').on('click', function(){
    if($('#toggle').text()==='Open'){
        $('#collapsible').slideUp();
        $('#toggle').text('Close');
    }else{
        $('#collapsible').slideDown();
        $('#toggle').text('Open');
    }
});

you can see it woking in this fiddle: http://jsfiddle.net/yhTpW/