Skip to content

Instantly share code, notes, and snippets.

@lukemorton

lukemorton/jquery.defAccord.js

Created October 8, 2010 12:19
Show Gist options
  • Save lukemorton/616699 to your computer and use it in GitHub Desktop.
Save lukemorton/616699 to your computer and use it in GitHub Desktop.
Download ZIP
<dt>, <dd> show hide jQuery plugin..
Raw
jquery.defAccord.js
/**
* Quick plugin for dt dd collapsible accordian
* @author Luke Morton
*
* @example
*
// For all <dt> elements in a document
$('dt').defAccord();
// For <dt> elements within an element <div id="element-id">
$('#element-id').find('dt').defAccord();
// To show the first element by default
$('dt').defAccord({defaultHide: ':gt(0)'});
*
* !!! Requires jQuery v1.4.2+
*/
;(function(window, document, $, undefined) {
/**
* Publically accessible object
*/
$.defAccord = {};
/**
* Global Settings
*/
$.defAccord.globalSettings = {
/**
* Selector for filtering <dd> elements
*
* By default we hide all <dd> elements
*
* Set to false to hide none so you can controlling initial
* appearance with CSS instead. You can also use anything here
* that jQuery.fn.filter() accepts (http://api.jquery.com/filter/).
*/
defaultHide: '*'
};
/**
* The jQuery function extension
*/
$.fn.defAccord = function(settings)
{
var dt = this;
// Combine custom settings with global settings
settings = $.extend({}, $.defAccord.globalSettings, settings || {});
// This should represent the dt tags, we will find the dd
dt.each(function() {
// Definition Term
var $dt = $(this);
// Find it's Definition Definitions
var $dd = $dt.nextUntil(':not(dd)');
// Hide by default if settings.defaultHide !== false
if (settings.defaultHide !== false)
{
$dd.filter(settings.defaultHide).hide();
}
// Toggle $dd on click (clicking a child <a> will trigger this)
$dt.bind('click', function(e) {
// Stop default click action
e.preventDefault();
// Toggle visiblity with a slide effect
$dd.slideToggle();
});
});
// Return this to allow method chaining
return dt;
};
})(this, this.document, jQuery);
Raw
jquery.defAccord.js.example.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example for jquery.defAccord.js</title>
<style type="text/css">
dt{font-weight:bold;}
dd{margin-bottom:10px;}
#example-two dd{display:none;}
</style>
</head>
<body>
<h1>jquery.defAccord.js Examples</h1>
<div id="example-one">
<h2>Example One</h2>
<p>This is a simple example.</p>
<dt>
<a href="#">Lorem ipsum</a>
</dt>
<dd>Vestibulum at ligula et tellus pretium interdum a quis massa. Etiam consequat rhoncus libero luctus luctus. Nullam et nulla nulla. Nullam justo neque, luctus eget bibendum sed, congue vel tortor. Sed vel ante arcu. Aliquam nulla nisi, elementum at adipiscing eu, facilisis a justo. Duis feugiat, mauris ut consectetur hendrerit, quam nulla tincidunt nunc, in consequat libero odio non dui.</dd>
<dd>Morbi quis massa nec lorem sollicitudin pretium tristique a dui. </dd>
<dd>Pellentesque elit purus, molestie id fermentum vitae, faucibus sed nulla. Integer sed blandit lacus. Duis facilisis, lectus id fringilla aliquet, odio sem lobortis elit, sed ornare libero magna a metus. Suspendisse vestibulum interdum augue nec pellentesque.</dd>
<dt>
<a href="#">Curabitur pharetra</a>
</dt>
<dd>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent elit lacus, rhoncus sit amet consectetur in, tincidunt vel ipsum.</dd>
<dt>
<a href="#">Nulla facilisi</a>
</dt>
<dd>Curabitur pharetra pulvinar diam, ac eleifend tellus auctor nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque et eros arcu, sit amet laoreet odio. Sed viverra tincidunt congue.</dd>
<dd>Morbi nulla augue, venenatis vulputate lacinia sit amet, venenatis sit amet massa.</dd>
</div>
<div id="example-two">
<h2>Example Two</h2>
<p>This is an example of how to show all the &lt;dd&gt; elements for the first definition term.
<dt>
<a href="#">Lorem ipsum</a>
</dt>
<dd>Vestibulum at ligula et tellus pretium interdum a quis massa. Etiam consequat rhoncus libero luctus luctus. Nullam et nulla nulla. Nullam justo neque, luctus eget bibendum sed, congue vel tortor. Sed vel ante arcu. Aliquam nulla nisi, elementum at adipiscing eu, facilisis a justo. Duis feugiat, mauris ut consectetur hendrerit, quam nulla tincidunt nunc, in consequat libero odio non dui.</dd>
<dd>Morbi quis massa nec lorem sollicitudin pretium tristique a dui. </dd>
<dd>Pellentesque elit purus, molestie id fermentum vitae, faucibus sed nulla. Integer sed blandit lacus. Duis facilisis, lectus id fringilla aliquet, odio sem lobortis elit, sed ornare libero magna a metus. Suspendisse vestibulum interdum augue nec pellentesque.</dd>
<dt>
<a href="#">Curabitur pharetra</a>
</dt>
<dd>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent elit lacus, rhoncus sit amet consectetur in, tincidunt vel ipsum.</dd>
<dt>
<a href="#">Nulla facilisi</a>
</dt>
<dd>Curabitur pharetra pulvinar diam, ac eleifend tellus auctor nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque et eros arcu, sit amet laoreet odio. Sed viverra tincidunt congue.</dd>
<dd>Morbi nulla augue, venenatis vulputate lacinia sit amet, venenatis sit amet massa.</dd>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.defAccord.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
/**
* Example One
*/
$('#example-one').find('dt').defAccord();
/**
* Example Two
*/
var $exampleTwo = $('#example-two');
var $exampleTwoDt = $exampleTwo.find('dt');
// Call defAccord
$exampleTwoDt.defAccord({filter: false});
// Show first <dt> collection of <dd>
$exampleTwoDt.first().nextUntil(':not(dd)').show();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment