public
Created

Simple JQuery Content Slider plugin

  • Download Gist
HOWTO.txt
1 2 3 4 5 6 7 8
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>
</a>
contentslider.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
/*
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') {
$(ref).hide();
} else {
$(ref).show();
}
toggle_refresh(this);
});
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); } );
});
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.