jquery Instance Tutorial: Making a collapsible panel in a Web page

Article Introduction: jquery Collapsible Panel effect.

Let's combine the techniques of a few examples before making a collapsible panel. To achieve the effect below, you need to invoke the Slidedown () method and the Slideup () two methods.

The core jquery code that implements the example:

$ (document). Ready (function () {
    $ (". Message_list. MESSAGE_BODY:GT (0)"). Hide ();
    $ (". Message_list li:gt (4)"). Hide ();
    $ (". Message_head"). Click (function () {
        $ (this). Next (". Message_body"). Slidetoggle return
        false;
    $ (". Collpase_all_message"). Click (function () {
        $ (". Message_body"). Slideup return
        false;
    $ (". Show_all_message"). Click (function () {
        $ (this). Hide ()
        $ ('. Show_recent_only '). Show ()
        $ (". Message_list LI:GT (4) "). Slidedown () return
        false;
    });
    $ (". Show_recent_only"). Click (function () {
        $ (this). Hide ()
        $ ('. Show_all_message '). Show ()
        $ (". Message_list LI:GT (4) "). Slideup () return
        false;
    });

Line 1th: Hides all elements in the <div class= "Message_body" >, except the first

Line 2nd: Hide all <li> elements after fifth

Part 3rd: When the user clicks <p class= "Message_head" >, the next <div class= "Message_body" > to the Drop-down display operation.

Part 4: <a class= "Collpase_all_message" > Click Yes to fold all <div class= "Message_body" > elements.

Part 5th: When <a class= "Show_all_message", displays <a class= "Show_recent_only", and displays all elements following the fifth <li> element.

Part 6th: When clicked <a class= "Show_recent_only", hides the element, then displays <a class= "Show_all_message", and the 5th <li> after all < Li> elements are folded and hidden.

Http://www.webjx.com/files/soft/1_120303222535.zip