Skip to content

Instantly share code, notes, and snippets.

@sveetch
Created August 25, 2017 23:38
Show Gist options
  • Save sveetch/1795dabb715c3b71242f56400e72e674 to your computer and use it in GitHub Desktop.
Save sveetch/1795dabb715c3b71242f56400e72e674 to your computer and use it in GitHub Desktop.
Content reveal jQuery plugin
/*
* Content to reveal on click with 'content-revealer' plugin
*/
.content-to-reveal{
display: none;
}
/*
* jQuery basic plugin "Content revealer"
*
* To use on a link reveal hided element with 'slideDown' animation, link
* emitter will be hided.
*
* Link 'href' is basically any valid DOM selector to element to reveal, but
* commonly a '#id' that match element id.
*
*
* HTML sample:
*
* <a href="#sample-to-reveal" class="content-revealer">Read more</a>
* ...
* <div id="sample-to-reveal" class="content-to-reveal">Hello world!</div>
*
*
* You will have to hide '#sample-to-reveal' by yourself with CSS rule, plugin
* does not do that for you (and doing it from CSS is better than from JS).
*
*
* CSS sample:
*
* .content-to-reveal{
* display: none;
* }
*
*
* Usage exemple:
*
* $('.content-revealer').contentrevealer();
*
*/
(function ( $ ) {
/*
* Plugin extensions calling logic
*/
$.fn.contentrevealer = function(method) {
// Specific public method called
if ( extensions[method] ) {
return extensions[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
// Default public method to init the plugin
} else if ( typeof method === 'object' || ! method ) {
return extensions.init.apply( this, arguments );
// Unknow called method
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.contentrevealer' );
}
};
// Default public plugin settings
var default_settings = {};
/*
* Plugin event methods
*/
var events = {
/*
* Click perform scroll to element then show it
*/
gotoreveal: function(event) {
event.preventDefault();
// Get target position
var $link = $(this),
$target = $( $link.attr('href') );
// Show element
$link.hide();
$target.addClass('opened').slideDown();
}
};
/*
* Plugin extension methods
*/
var extensions = {
/*
* Initialize plugin, default public method, must be called first
*/
init : function(options) {
var settings = $.extend(default_settings, options);
return this.each(function() {
var $link = $(this);
// Bind sample event
$link.on("click.contentrevealer.gotoreveal", events.gotoreveal);
});
},
/*
* Destroy instance from container and all its attached stuff
*/
destroy : function() {
return this.each(function() {
var $container = $(this);
// 3. Disable every event from container
$container.off(".contentrevealer");
});
}
};
}( jQuery ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment