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>
