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.
Thank you so much!