When your website means business.

CSS, jQuery, Responsive | Type: JavascriptResponsive jQuery Accordions (vertical expansion)

Nice responsive accordian.

HTML
<div class="accordion-container">
<a href="#" class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_rome.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
(Repeat as necessary)

CSS
.accordion-container { width: 100%; margin: 0 0 20px; clear: both; }
.accordion-toggle { position: relative; display: block; padding: 20px; font-size: 1.5em; font-weight: 300; background: #999; color: #fff; text-decoration: none; }
.accordion-toggle.open { background: #333; color: #fff; }
.accordion-toggle:hover { background: #666; }
.accordion-toggle span.toggle-icon { 	position: absolute; top: 9px; right: 20px; font-size: 1.5em; }
.accordion-content { display: none; padding: 20px; overflow: auto; }
.accordion-content img { display: block; float: left; margin: 0 15px 10px 0; max-width: 100%; height: auto; }
 
/* media query for mobile */
@media (max-width: 767px) {
.accordion-content { padding: 10px 0; overflow: inherit; }
}

JQUERY
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.next('.accordion-content');
    	var accordionToggleIcon = $(this).children('.toggle-icon');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("open");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
    	
    	// change plus/minus icon
    	if (accordion.hasClass("open")) {
    		accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");
    	} else {
    		accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
    	}
    });
});
});
</script>

Reference Links

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept