Smooth Horizontal Accordion Slideshow with jQuery and CSS3

An elegant jQuery & CSS3 based horizontal slideshow with smooth accordion effects using jQuery animation APIs. Mouse hover a slide to expand and the others will be collapsed.

How to use it:

1. Create content for the horizontal slideshow using Html unordered lists.

<ul class="accordion" id="accordion">
  <li class="bg1">
    <div class="heading">Heading</div>
    <div class="bgDescription"></div>
    <div class="description">
      <h2>Heading 1</h2>
      <p>Description 1</p>
      <a href="#">Read more</a> </div>
  </li>
</ul>

<ul class="accordion" id="accordion">
  <li class="bg2">
    <div class="heading">Heading2</div>
    <div class="bgDescription"></div>
    <div class="description">
      <h2>Heading 2</h2>
      <p>Description 2</p>
      <a href="#">Read more</a> </div>
  </li>
</ul>

<ul class="accordion" id="accordion">
  <li class="bg3">
    <div class="heading">Heading3</div>
    <div class="bgDescription"></div>
    <div class="description">
      <h2>Heading 3</h2>
      <p>Description 3</p>
      <a href="#">Read more</a> </div>
  </li>
</ul>

<ul class="accordion" id="accordion">
  <li class="bg4">
    <div class="heading">Heading4</div>
    <div class="bgDescription"></div>
    <div class="description">
      <h2>Heading 4</h2>
      <p>Description 4</p>
      <a href="#">Read more</a> </div>
  </li>
</ul>

2. The core CSS styles for the accordion slideshow.

ul.accordion {
  list-style-type: none;
  position: relative;
  top: 0;
  font-family: "roboto", sans-serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5em;
}

ul.accordion li {
  float: left;
  width: 115px;
  height: 480px;
  display: block;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 1px 3px 5px #555;
  -moz-box-shadow: 1px 3px 5px #555;
  box-shadow: 1px 3px 5px #555;
}

3. Add background images to the content slides.

ul.accordion li.bg1 { background-image: url("1.jpg"); }

ul.accordion li.bg2 { background-image: url("2.jpg"); }

ul.accordion li.bg3 { background-image: url("3.png"); }

ul.accordion li.bg4 { background-image: url("4.jpg"); }

4. Style the other slideshow elements in the CSS.

ul.accordion li.bleft { border-left: 2px solid #fff; }

ul.accordion li .heading {
  background: #fff;
  padding: 10px;
  margin-top: 60px;
  opacity: 0.9;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  color: #444;
  text-align: center;
  text-shadow: -1px -1px 1px #ccc;
}

ul.accordion li .description {
  position: absolute;
  width: 480px;
  height: 175px;
  bottom: 0;
  left: 0;
  display: none;
}

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: 0 0 15px 20px;
  text-shadow: -1px -1px 1px #ccc;
}

ul.accordion li .description p {
  line-height: 14px;
  margin: 10px 22px;
  font-family: "roboto", 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;
}

ul.accordion li .bgDescription {
  background: linear-gradient(0deg, #fff 40%, rgba(255,255,255,0));
  height: 340px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: none;
}

5. Add the following JavaScript snippets after jQuery library to enable the accordion slideshow.

$(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(500);
      $('.description',$this).stop(true,true).fadeIn();
    },
    function(){
      var $this = $(this);
      $this.stop().animate({"width": "115px"},1000);
      $('.heading', $this).stop(true,true).fadeIn();
      $('.bgDescription', $this).stop(true,true).slideUp(500);
      $('.description',$this).stop(true,true).fadeOut();
    }
  )
});

---

This awesome jQuery plugin is developed by tourn171. For more Advanced Usages, please check the demo page or visit the official website.