Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple JQuery Content Slider plugin
Simple JQuery Content Slider plugin
Created by Liam (liamzebedee) Edwards-Playne
Licensed under GPLv3
jQuery( document ).ready(function($) {
// Toggle Initialization
$('.toggle').each(function() {
visibility = $(this).attr('visibility');
ref = $(this).attr('ref');
if(visibility == 'hidden') {
} else {
function toggle_refresh(toggle) {
ref = $(toggle).attr('ref');
visible = $(ref).is(':visible');
if (visible) {
// Only show the close buttons
$(toggle).find('.open').each(function() { $(this).hide() });
$(toggle).find('.close').each(function() { $(this).show() });
} else {
// Only show the open buttons
$(toggle).find('.close').each(function() { $(this).hide() });
$(toggle).find('.open').each(function() { $(this).show() });
$('.toggle').click(function() {
element = $(this).attr('ref');
toggle = this;
$(element).slideToggle("fast", function() { toggle_refresh(toggle); } );
A content slider is any element with the class 'toggle'. These elements contain 2 main attributes - 'ref', which is a JQuery selector to the element we are toggling, and 'visibility' which is the default visibility of the element referenced by 'ref', which can be either 'hidden' or 'visible'.
The content slider has 2 children which are represent the data to show depending on the visibility. One child is of class 'open' and the other of 'close'. 'open' is shown whenever the 'ref' element is hidden, and 'close' is shown whenever the 'ref' element is shown. Here is an example toggler:
<a class="toggle" ref="#respond" visibility="shown" title="Comment Submission Form Toggle">
<span class="open">Show Comment Form</span>
<span class="close">Hide Comment Form</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment