JQuery example Tutorial: Create a foldable panel on a webpage

JQuery example Tutorial: Create a foldable panel on a webpage

Let's combine the techniques of the previous examples to create a foldable panel. To achieve the following results, call the slideDown () method and slideUp () method.

The core jQuery code to implement this 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 (500)

Return false;

});

$ (". Collpase_all_message"). click (function (){

$ (". Message_body"). slideUp (500)

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;

});

});

Row 1st: hides all elements in <div class = "message_body">, except for the first element.

Row 3: Hide all <li> elements following the fifth element.

Part 1: When you click <p class = "message_head">, the next <div class = "message_body"> is displayed in the drop-down list.

Part 1: <a class = "collpase_all_message"> click yes to fold all <div class = "message_body"> elements.

Part 2: When <a class = "show_all_message">, <a class = "show_recent_only"> is displayed, and all elements following the fifth <li> element are displayed.

Part 2: When you click <a class = "show_recent_only">, hide the element to be hidden and display <a class = "show_all_message">, hide all the <li> elements following the 5th <li>.