Elarie Elarie - 5 months ago 44
HTML Question

jQuery collapsible div, collapsing 2nd div

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

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/

Comments