Write the folding panel by yourself

This is a function in the project. When you start to add this function, you first think of the jquery plug-in. Because there are many jquery folding menu plug-ins, there are many folding panel plug-ins, so the first is to test the jquery plug-in, however, after testing about three items, we found that the function was indeed powerful, but there were several items that did not meet our requirements, or the color was hard to change (using a fixed image ), or you need to change more CSS styles. So I decided to develop it myself.

Developing the folding panel with jquery is very simple.

Implementation ideas:
Hide all by default. When you click a button, perform the hide operation first, and then display the currently clicked button. If you click again, perform the hide operation.

Code:
1. Reference

<script src="http://shandongit.com/js/jquery.js"></script>

2. CSS

Body {font-family: ;}. box-show {width: 350px; margin: 1em. 5em ;}. box-show H3 {margin: 0; padding :. 45em; Background: # ebebeb; color: black; font-size: 16px; border-top: 1px solid # 3c3c3c; border-bottom: 1px solid # 3c3c3c ;}. box-show Div {padding :. 5em. 25em ;}

3. html

<Div class = "Box-show"> 
4. js used
$(document).ready(function() {  $(‘div.box-show:eq(0)> div‘).hide();    $(‘div.box-show:eq(0)> h3‘).click(function() {    $(this).next().slideToggle(‘fast‘);  });});
Demo address:
Collapse panel demo
This article from "Weifang SEO" blog, please be sure to keep this source http://weifangseo.blog.51cto.com/9257185/1543283