How to make the DIV contents slide out and appear only when the user clicks on the DIV heading?
If I have a DIV heading of Contact Details
or Address Details
, as in the following example:
http://jsfiddle.net/2CZFL/
how can I use jQuery to implement a feature whereby t开发者_如何转开发he contents of the div only slide out and appear to the user when the user clicks on the DIV heading.
See fiddle for how to make it open and close: http://jsfiddle.net/maniator/wU8s2/
here's a simple example
<script>
jQuery(document.body).ready(function(){
jQuery('.sneakycontent h3').click(function(){
jQuery('.sneakycontent div').slideToggle();
});
});
</script>
<div class="sneakycontent">
<h3>Click Me Newb!</h3>
<div style="display:none;">Keep eating those stackoverflow weaties kiddies and you can be as cool as me!</div>
</div>
Simple demo with using your fiddle, http://jsfiddle.net/andresilich/DR3x8/
[Make sure to add "display:none" to the content below the headers in order to hide them and only show when clicked.]
精彩评论