Skip to content

Instantly share code, notes, and snippets.

@AlexeyPogorelov
Last active August 22, 2016 07:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlexeyPogorelov/d1036527a0f9329496fc4e3d580926f8 to your computer and use it in GitHub Desktop.
Save AlexeyPogorelov/d1036527a0f9329496fc4e3d580926f8 to your computer and use it in GitHub Desktop.
// SHOW BY CLICK
//
// This self-invoking function returns init function. If you dynamicly modify or add new DOM structure, you can easyly run plugin for new elements.
// Init function needs one argument. Argument can be a DOM node or jQuery object containing element(s) for init.
// Basicly you can change selector by changing "selector" variable. Also you can give your dynamicly created trigger elements a className by changing "triggerClass" variable.
// In the "triggerText" array you can find text for trigger nodes or set it by adding custom "data-show-text" and "data-hide-text" attributes
// Please send BUG reports or any proposals to alexey.intertech@gmail.com
;(function showByClick ($) {
if (!$) {
console.warn('"show by click" requires jQuery');
return;
};
// options
var selector = 'show-by-click',
triggerText = [
'show more',
'show less'
],
triggerClass = 'show-by-click-trigger',
// other stuff
$show,
$hide,
clickHandler,
css,
init;
// create triggers
$show = $('<div>')
.addClass(triggerClass + ' action-show');
$hide = $('<div>')
.addClass(triggerClass + ' action-hide');
clickHandler = function (e) {
var $_ = $(this),
$target = $(e.target);
if (!$target.hasClass( triggerClass )) return;
if ( $target.hasClass( 'action-show' ) ) {
$_.addClass('opened');
} else if ( $target.hasClass( 'action-hide' ) ) {
$_.removeClass('opened');
};
}
init = function ($parent) {
if ( typeof $parent !== 'object' ) {
console.warn('Insert DOM node or jQuery object as first argument');
return;
}
if ( !($parent instanceof $) ) {
$parent = $($parent);
}
$parent.find('.' + selector).each(function () {
var $_ = $(this),
showText = $_.attr('data-show-text') || triggerText[0],
hideText = $_.attr('data-hide-text') || triggerText[1];
if ( $_.attr('data-inited') ) return;
$_.attr('data-inited', true);
$_.on('click', clickHandler);
$_.append([
$show.clone().html( showText ),
$hide.clone().html( hideText )
]);
});
}
init( $('body') );
// style node
css = '' +
'.' + selector + ':not(.opened) * {' +
'display: none !important;' +
'}' +
'.' + selector + ':not(.opened) .action-show {' +
'display: block !important;' +
'}' +
'.' + selector + ' .action-hide {' +
'display: none;' +
'}' +
'.' + selector + '.opened .action-hide {' +
'display: block;' +
'}' +
'.' + selector + '.opened .action-show {' +
'display: none;' +
'}' +
';'
$('head').prepend(
$('<style data-sourse="added from -show by click-" >').html( css )
);
return init;
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment