JS learning--------collapsible pannel

This one is very common, and it is pretty easy, the most important is function and style  .

Here is simple version of my task: when you click title, then content will come out.

At the beginning, i did not set style only function, actually it does not work.
So let me conclude, for this small panel, we have to focus on 3 parts:

1. style
2. link for js. min
3. javascript function

here is javascript function what i have,






As i have 2 panels, so i need to input this ,next , to specify that when users click title, the matched content could show.



then, there is another way to do the same website by using toggleClass();

this method means that change style through class name, but the content is not changed.
one example, 
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass

And i still have one question about selector, and space between two class name.

There is still another way, a little bit different, i will post soon.

And we found one funny CSS property is overflow.
http://www.w3schools.com/CSSref/playit.asp?filename=playcss_overflow

from this website, you can understand what it means.
And you need to know that

1. overflow property only works for block elements with a specified height.
2. meaning of this property: what happens if content overflows an element's box.
3.the default value is initial, which means that show everything.