JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<ul id="accordionify">
<li class="active" data-title="Title 1">
<ul>
<li>Hello2!</li>
<li>How you doing?</li>
<li>Hi!</li>
</ul>
</li>
<li class="" data-title="Title 2">
<p>Hello there</p>
<p>How are you today?</p>
</li>
<li class="" data-title="Title 3">
<img src="http://lorempixel.com/400/200/" alt="Test"/>
</li>
</ul>
JavaScript
// PLUGIN DEFINITION (1/2)
/*!
jQuery.sdAccordionify v0.1
(c) 2015 Steve David <http://www.steve-david.com>
MIT-style license.
*/
;(function($) {
$.fn.extend({
sdAccordionify: function(options) {
if (options && typeof(options) == 'object') {
options = $.extend({}, $.sdAccordionify.defaults, options);
}
if($(this).length == 1) {
new $.sdAccordionify(this, options);
}
return this;
}
});
$.sdAccordionify = function(el, option) {
var options = option || $.sdAccordionify.defaults;
var $ul = $(el)
, width = $ul.width() / 3
, height = $ul.height() / 3
, $lis = $ul.find('> li')
, accordion = $.sdAccordionify.buildAccordion($lis)
;
$container = $.sdAccordionify.createAndFillDiv(el, accordion, options);
$lis.each(function(i) {
if($(this).hasClass('active')) {
$.sdAccordionify.extend($container.find('> .sda-content').eq(i), options);
}
});
$container.find('> .sda-title').on('click', function(e) {
e.preventDefault();
$.sdAccordionify.extend(this, options);
});
return;
};
$.sdAccordionify.defaults = {};
$.sdAccordionify.buildAccordion = function($lis) {
var accordion = {};
$lis.each(function(i) {
accordion[$(this).data('title')] = $.trim($(this).html());
});
return accordion;
};
$.sdAccordionify.createAndFillDiv = function(el, accordion, options) {
var length = $(el).find('> li').length
, i
, $div = $('<div>').attr('id', 'sdAccordionify').css({
width: options.width,
border: '1px solid ' + options.colors.containerBorder
})
, widths = []
;
$(el).css('padding', 0).find('> li').each(function(i) {
...