Responsive Accordion Gallery Plugin With jQuery

Responsive Accordion Gallery Plugin With jQuery
File Size: 37.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A really simple jQuery plugin for creating a responsive accordion gallery where the image will be expanded to show more details when clicked. It also has the ability to breaks down into an image slider on small screens.

How to use it:

1. Include the basic stylesheet in the document's head section:

<link rel="stylesheet" href="style.css">

2. The primary html structure for the accordion gallery.

<div class="accordion-container">
  <div class="accordion clearfix">
    <div class="accordion-item-container">
      <div class="accordion-item-content">
        <div class="accordion-item-image">
          <img src="1.jpg">
        </div>
        <div class="accordion-item-info">
          <div class="accordion-item-text">
            Details here
          </div>
          <div class="sx-icon-close close"></div>
        </div>
      </div>
    </div>
    <div class="accordion-item-container">
      <div class="accordion-item-content">
        <div class="accordion-item-image">
          <img src="2.jpg">
        </div>
        <div class="accordion-item-info">
          <div class="accordion-item-text">
            Details here
          </div>
          <div class="sx-icon-close close"></div>
        </div>
      </div>
    </div> 
    <div class="accordion-item-container">
      <div class="accordion-item-content">
        <div class="accordion-item-image">
          <img src="3.jpg">
        </div>
        <div class="accordion-item-info">
          <div class="accordion-item-text">
            Details here
          </div>
          <div class="sx-icon-close close"></div>
        </div>
      </div>
    </div>
    <div class="accordion-item-container">
      <div class="accordion-item-content">
        <div class="accordion-item-image">
          <img src="4.jpg">
        </div>
        <div class="accordion-item-info">
          <div class="accordion-item-text">
            Details here
          </div>
          <div class="sx-icon-close close"></div>
        </div>
      </div>
    </div>
  </div>
</div>

3. Include jQuery JavaScript library and the jquery.accordion.js script at the bottom of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.accordion.js"></script>

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