Site branding List effect jquery effect

When the user enters the page, the branding list is the default thin display such as:

Click the View All button below the list of items to display all the brands, while the recommended branding text is highlighted, and the text in the button becomes "Closed view"

How does the JQuery code:

<script type= "Text/javascript" >
$ (document). Ready (function () {
var $cart =$ ("UL li:gt (5): Not (: last)"); Get a branded collection object with an index value greater than 5 (except for the last one)
$cart. Hide (); Hide the jquery object obtained above
var $showBtn =$ (". showbtn"); Get the "View all Brands" button
$showBtn. Click (function () {//Add OnClick event to button
if ($cart. Is (": visible")) {//If the element is displayed
$cart. Hide (); Hide $cart
$showBtn. Text ("View All"); Change the text PS background image with CSS ("Background", "url (path) no-repeat 0 0");
$ ("ul Li"). Removeclass ("active"); Remove highlighting
}else{
$cart. Show (); Show $cart
$showBtn. Text ("Close View"); Change button text
$ ("ul Li"). Filter (": Contains (' Sony '),: Contains (' Samsung ')"). AddClass ("active"); Filter content that contains text to add a highlight style
}
});

});

</script>

Note: Show (): Shows hidden matching elements

Hide (): Hide matching elements

CSS ("", ""): Setting Styles for elements

Text ("string"): Sets the text content of the element

Filter (expr): Filters out a collection of elements that match the specified expression, where expr can be a combination of multiple selectors

Contains (): Contains text elements

AddClass (): Adds the specified class name for the matching element

Removeclass (): Removes the specified class name for the matching element

: visible element Display

Site branding List effect jquery effect