I needed a sliding show/hide panel.

The HTML was set up as follows:

<div id="rightpane">
<div id="infopanel">
<h2>Slider Magic</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate   velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint   occaecat cupidatat non proident, sunt in culpa qui officia deserunt   mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea   commodo consequat. Duis aute irure dolor in reprehenderit in voluptate   velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint   occaecat cupidatat non proident, sunt in culpa qui officia deserunt   mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim   veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea   commodo consequat. Duis aute irure dolor in reprehenderit in voluptate   velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint   occaecat cupidatat non proident, sunt in culpa qui officia deserunt   mollit anim id est laborum.</p>
</div>
<div>More Details</div>
</div>

The magic jQuery required was as follows:

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
var maxHeight = $("#infopanel").css('height');
$("#infopanel").css({'height':'180px','overflow':'hidden'});
$(".showmore").toggle(showPanel,hidePanel);
function showPanel(){
$("#infopanel").animate({height:maxHeight});
$(".showmore").text('- Fewer Details');
}
function hidePanel(){
$("#infopanel").animate({height:"180px"});
$(".showmore").text('+ More Details');
}
});
</script>

Interesting features are the use of the jQuery toggle.  This calls one of two functions to open or close the panel based on its previous state.

See a working Demo Here

One Thought to “jQuery Show More / Show Less Slider”

Leave a Reply to thiago Cancel reply