Use JQuery & CSS3 to achieve an elegant accordion effect

Accordion effects are often used to toggle the display of a set of content, which can save both Web space and animation. Today, we will create an elegant accordion content effect. The idea is that there are some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the appearance.

Effects Demo Plugin Download

HTML Sample code:

<ul class= "accordion" id= "accordion" >    <li class= "bg1" >        <div class= "heading" >heading</ div>        <div class= "bgdescription" ></div>        <div class= "description" >            
CSS Sample code:
Ul.accordion li description h2{    text-transform:uppercase;    Font-style:normal;    Font-weight:bold;    letter-spacing:1px;    font-size:45px;    Color: #444;    Text-align:left;    margin:0px 0px 15px 20px;    text-shadow:-1px-1px 1px #ccc;} Ul.accordion li description p{    line-height:14px;    margin:10px 22px;    font-family: "Trebuchet MS", Sans-serif;    font-size:12px;    Font-style:italic;    Font-weight:normal;    Text-transform:none;    Letter-spacing:normal;    Line-height:1.6em;} Ul.accordion li description a{    position:absolute;    bottom:5px;    left:20px;    Text-transform:uppercase;    Font-style:normal;    font-size:11px;    Text-decoration:none;    Color: #888;} Ul.accordion li. Description a:hover{    color: #333;    Text-decoration:underline;}
JavaScript code:
$ (function () {    $ (' #accordion > Li '). Hover (        function () {            var $this = $ (this);            $this. Stop (). Animate ({' width ': ' 480px '},500);            $ ('. Heading ', $this). Stop (True,true). FadeOut ();            $ ('. Bgdescription ', $this). Stop (True,true). Slidedown (+);            $ ('. Description ', $this). Stop (True,true). FadeIn ()        ,        function () {            var $this = $ (this);            $this. Stop (). Animate ({' width ': ' 115px '},1000);            $ ('. Heading ', $this). Stop (True,true). FadeIn ();            $ ('. Description ', $this). Stop (True,true). FadeOut (+);            $ ('. Bgdescription ', $this). Stop (True,true). Slideup ();}        )    ;
　　
Related articles that may be of interest to you
 
 

  
  
 
   
Web development in a very practical 10 effects "source Download"
 
   
Carefully selected excellent jquery Ajax page plug-ins and tutorials
 
   
12 Amazing ideas for 404 error page Design
 
   
Let the website Move! 12 Excellent jQuery animation plugins
 
   
Stunning 8 x HTML5 & JavaScript Effects
 
  
 
 
This article links: using JQuery and CSS3 to achieve an elegant accordion effect
Compilation Source: Dream Sky focus on front-end development technology sharing web design resources
Use JQuery & CSS3 to achieve an elegant accordion effect