jquery A site brand list effect

jquery a website brand list effect, very classic one case practice, mainly is the practice of jquery method familiar!

：

Html:

<divclass="Subcategorybox"> <ul> <li><a href="#"> Canon </a><i> (12367) </i></li> <li><a href="#"> Sony </a><i> (12367) </i></li> <li><a href="#"> Samsung </a><i> (12367) </i></li> <li><a href="#"> Nikon </a><i> (12367) </i></li> <li><a href="#"> Panasonic </a><i> (12367) </i></li> <li><a href="#"> Casio </a><i> (12367) </i></li> <li><a href="#"> Fuji </a><i> (57866) </i></li> <li><a href="#"> Kodak </a><i> (57866) </i></li> <li><a href="#"> Pentax </a><i> (57866) </i></li> <li><a href="#"> Ricoh </a><i> (57866) </i></li> <li><a href="#"> Olympus </a><i> (57866) </i></li> <li><a href="#"> BenQ </a><i> (57866) </i></li> <li><a href="#"> Patriots </a><i> (57866) </i></li> <li><a href="#"> Other brand Cameras </a><i> (57866) </i></li> </ul> <divclass="ShowMore Clearfix"> <a href="#"><span> Show All brands </span></a> </div> </div>

Css:

*{margin:0;padding:0;}    . Clearfix{content: ""; clear:both;}    . subcategorybox{        width:600px;border:1px solid #ccc;        overflow:hidden;padding:10px;        position:relative;        top:50%;left:50%;        margin-left:-300px;    }    . Subcategorybox Ul{list-style:none;}    . Subcategorybox ul li{float:left;width:33.3%;        Height:30px;line-height:30px;text-align:center;}    . Subcategorybox ul Li A{text-decoration:none;color: #000;}    . showmore{            width:100%;height:30px;            Text-align:center;        }    . ShowMore a{             Display:inline-block;             width:100px;height:30px;line-height:30px;            border:1px solid #ccc;p adding:2px;        Text-decoration:none;color: #000;}    . promoted{color:red;}

　　

JQ:

$ (function () {        var $category =$ ("ul li:gt (6): Not (: last)");//        $category. Hide ();        var $toggleBtn =$ ("Div.showmore>a");        $toggleBtn. Click (function () {            if ($category. Is (": visible")) {                $category. Hide ();                $ (this). FIND ("span"). Text ("Show All Brands");                $ ("ul Li"). Removeclass ("promoted");            } else{                $category. Show ();                $ (this). FIND ("span"). Text ("Thin display Brand");                $ ("ul Li"). Filter (": Contains (' Canon '),: Contains (' Nikon '),: Contains (' Olympus ')"). AddClass ("promoted");            }            return false;        });    

　　

jquery A site brand list effect