Slide Up/down Content & Switch Between Images Just Like An Accordion

If you are looking for a modern jQuery accordion that has good looking and clean UI, easy to customize and extend -- this is the one.

In this post, we are sharing with you an awesome accordion UI that switches between images when toggling (sliding up & sliding down) accordion panels.

As this component is pure HTML/CSS and uses jQuery's slide functions to toggle the accordion panels, it’s compatible with most of the modern browsers.

How to use it:

1. Build the HTML structure for the accordion UI and assign each accordion panel an explanatory image as follows:

<div class="content">
  <div class="accordion">
    <div class="title active" data-image="1.png">
      Accordion 1
    </div>
    <div class="desc active">
      Accordion Content 1
    </div>
    <div class="title" data-image="2.png">
      Accordion 2
    </div>
    <div class="desc">
      Accordion Content 2
    </div>
    <div class="title" data-image="3.png">
      Accordion 3
    </div>
    <div class="desc">
      Accordion Content 3
    </div>
    ... more accordion panels here ...
  </div>
  <div class="image">
      <img src="1.png">
  </div>
</div>

2. Load jQuery library and Font Awesome iconic font (OPTIONAL) in the document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- For Toggle Icons -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />

3. The example CSS for the accordion UI.

.content > div {
  width: 50%;
  float: left;
  height: 400px;
  box-sizing: border-box;
}

.title {
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  padding-left: 15px;
  transition: 0.3s;
  margin-bottom: 10px;
}

.title:after {
  content: '\f105';
  font-family: fontawesome;
  float: right;
  margin-right: 5px;
  margin-top: 3px;
  transition: 0.3s;
}

.title.active:after {
  transform: rotate(90deg);
  color: orange;
}

.title:hover,
.title.active {
  background-color: #203049;
  color: #fff;
}

.desc {
  padding: 15px;
  display: none;
}

.desc.active {
  display: block;
}

.image {
  text-align: right
}

.image img {
  height: 370px;
}

4. Enable the accordion UI and switch between images when you toggle between accordion panels.

$('.title').click(function () {
  $(this).addClass('active')
  $(this).siblings('.title').removeClass('active')
  $(this).siblings('.desc').stop().slideUp()
  $(this).next().stop().slideDown()
  var dataImage = $(this).attr('data-image')
  $('.image img').attr('src', dataImage)
})

---

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