The jQuery accordion plugins I have come across also come with some complex CSS. They rely on the CSS to hide elements and you have to dig your way through complex CSS elements in order to adapt the look for your own purposes. On of the the worst culprits for this is the one which comes with the jQuery UI library.
So I devised my own plugin which operates without any CSS, is easy to style, is lightweight, does not require anchors to open items, and provides flexibility to the item headers.
First the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accordion</title>
<style>
body
{
font: 90%/1.618 sans-serif;
padding-top:2em;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="micksaccordion">
<section>
<header>
<h1>Header 1</h1>
</header>
<article>
<p>This is from article 1</p>
</article>
</section>
<section>
<header>
<h2>Header 2</h2>
</header>
<article>
<p>This is from article 2</p>
</article>
</section>
<section>
<header>
<h3>Header 3</h3>
</header>
<article>
<p>This is from article 3</p>
</article>
</section>
<section>
<header>
<h4>Header 4</h4>
</header>
<article>
<p>This is from article 4</p>
</article>
</section>
</div><!-- micksaccordion -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="accordion.plugin.js"></script>
<script>
(function()
{
/* Easy version
$('#micksaccordion').accordion();
*/
$('#micksaccordion').accordion(
{
/* 'first', 'last', false */
show:'last'
});
})();
</script>
</body>
</html>
And now the jQuery plugin:
(function($)
{
$.fn.extend(
{
accordion:function(options)
{
var defaults =
{
show:false
}
var options = $.extend(defaults, options);
return this.each(function()
{
var o = options;
var articles = $(this).find('article');
var firstSection = $(this).children().first();
var firstArticle = firstSection.find('article');
var lastSection = $(this).children().last();
var lastArticle = lastSection.find('article');
articles.hide();
if(o.show == 'first')
{
firstArticle.show();
}
if(o.show == 'last')
{
lastArticle.show();
}
var sections = $(this).find('section');
$(sections).on('click','header', function()
{
thesection = $(this).parent();
thearticle = thesection.find('article');
if (thearticle.css('paddingTop') == '0px') thearticle.css({paddingTop: '1px'});
if (thearticle.css('paddingBottom') == '0px') thearticle.css({paddingBottom: '1px'});
thearticle.slideToggle('slow');
});
});
}
});
})(jQuery);
Enjoy!
No comments:
Post a Comment