开发者

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.]

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜