In previous tip Can Css3 Transition replace jQuery animation ?  I mentioned some of the properties of CSS3 transition.Here i am explaining with a example to make make a Horizontal accordion with CSS3. ..

Browser support

The browsers which support CSS3 Transition properties are Google Chrome 7+,Opera 10+, Mozillafirefox 4.0 beta,Webkit browser Safari.Transition property is not supported in IE 8 and 9 beta.

HTML

<ul>
     <li class="FirstSlide">
        <div>
            <h2>
                    Slide1
            </h2>
               <p>
                 This is slide 1.Hover on me to see the effect.<br />
                 This is slide 1.Hover on me to see the effect.<br />
                 This is slide 1.Hover on me to see the effect.
               </p>
            </div>
        </li>
        <li class="SecondSlide">
            <div>
              <h2>
                  Slide2
              </h2>
              <p>
                 This is slide 2.Hover on me to see the effect.<br />
                 This is slide 2.Hover on me to see the effect.<br />
                 This is slide 2.Hover on me to see the effect.
              </p>
            </div>
        </li>
        <li class="ThirdSlide">
           <div>
              <h2>
                 Slide3
              </h2>
              <p>
                This is slide 3.Hover on me to see the effect.<br />
                This is slide 3.Hover on me to see the effect.<br />
                This is slide 3.Hover on me to see the effect.
              </p>
           </div>
        </li>
        <li class="FourthSlide">
            <div>
              <h2>
                 Slide4
              </h2>
              <p>
                This is slide 4.Hover on me to see the effect.<br />
                This is slide 4.Hover on me to see the effect.<br />
                This is slide 4.Hover on me to see the effect.
              </p>
           </div>
        </li>
        <li class="FifthSlide">
           <div>
               <h2>
                  Slide5
               </h2>
              <p>
                This is slide 5.Hover on me to see the effect.<br />
                This is slide 5.Hover on me to see the effect.<br />
                This is slide 5.Hover on me to see the effect.
              </p>
            </div>
       </li>
    </ul>

 
CSS

html
{
    font-family: Calibri, Arial, sans-serif;
    background: rgba(254,254,200,0.6);
    color: #666;
    height: 101%;
    font-size-adjust: 0.45;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
    margin: 0;
    padding: 0;
}
body
{
    width: 940px;
    padding: 100px 10px;
    margin: 0 auto;
}
h1
{
    font-weight: bold;
    font-size: 2em;
}
 
h2
{
    font-weight: bold;
    font-size: 1.5em;
}
/*------------------------------------*/
    ACCORDION
\*------------------------------------*/
 
.accordion
{
    width: 940px;
    overflow: hidden;
    list-style: none;
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
    background: blue;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
 
.accordion li
{
    float: left;
    width: 20%;
    overflow: hidden;
    height: 250px;
    -moz-transition: width 0.4s ease-out;
    -webkit-transition: width 0.4s ease-out;
    -o-transition: width 0.4s ease-out;
    transition: width 0.4s ease-out;
    -moz-transition-delay: 0.15s;
    -webkit-transition-delay: 0.15s;
    -o-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
 
.accordion li:first-of-type
{
    -moz-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
}
 
.accordion li:last-of-type
{
    -moz-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}
 
.accordion div
{
    padding: 10px;
}
 
.accordion:hover li
{
    width: 10%;
}
 
.accordion li:hover
{
    width: 60%;
}
 
.FirstSlide
{
    background: rgba(255,0,0,0.8);
    color: white;
}
 
.SecondSlide
{
    background: rgba(255, 165, 0,.8);
    color: white;
}
 
.ThirdSlide
{
    background: rgba(255, 255, 0,0.8);
    color: white;
}
 
.FourthSlide
{
    background: rgba(0, 128, 0,0.8);
    color: white;
}
 
.FifthSlide
{
    background: rgba(0, 0, 255,0.8);
    color: white;
}

Initially the width of all li’s are 20%(Total 20% * 5 = 100%) . When someone hovers on any li width of all li reduced to 10% and the current li width increases to 60%. ‘ 10%+10%+10%+10%+60% = 100% ‘ and added some Css3 transition for nice effects.