Как скрыть и открыть текст на сайте с использованием JQuery

8 455 любопытных

Всем читателям блога доброго времени суток. Сегодня будем учиться скрывать и открывать текст с использованием плагина JQuery. Данный плагин очень удобен и практичен. Вот например, если Вам на сайт нужно добавить какие нибудь правила раздела или описание к картинке, но этот текст будет занимать много места и отвлекать от основного контента, и его не помешало бы скрыть. Вот как раз этот JQuery плагин позволит это сделать, а если пользователь захочет прочитать этот текст, при нажатии на ссылку текст плавно выплывает. По моему очень удобно.

Теперь давайте посмотрим как выглядит сам плагин.

Плагин

(function ($) {
    $.fn.showHide = function (options) {

	//default vars for the plugin
        var defaults = {
            speed: 1000,
			easing: '',
			changeText: 0,
			showText: 'Show',
			hideText: 'Hide',

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
			 // this var stores which button you've clicked
             var toggleClick = $(this);
		     // this reads the rel attribute of the button to determine which div id to toggle
		     var toggleDiv = $(this).attr('rel');
		     // here we toggle show/hide the correct div at the right speed and using which easing effect
		     $(toggleDiv).slideToggle(options.speed, options.easing, function() {
		     // this only fires once the animation is completed
			 if(options.changeText==1){
		     $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
			 }
              });

		  return false;

        });

    };
})(jQuery);

Использование

В этом коде Вы, непосредственно, сможете настроить скорость, так сказать, выплывания текста.

$(document).ready(function(){

   $('.show_hide').showHide({
		speed: 1000,  // скорость открывания
		easing: '',  // Эффект анимации
		changeText: 1,
		showText: 'Показать',// Текст ссылки при открытии
		hideText: 'Закрыть' // Текст ссылки при закрытии

	});

});

HTML

В этом коде Вы увидите как с помощью тега <div> скрывается текст. К ссылке присваиваем класс и после неё пишем текст. В общем всё показано и хорошо видно на коде.

<a class="show_hide" href="#" rel="#slidingDiv">Посмотреть</a></pre>
<div id="slidingDiv" style="display: none;">Здесь текст который нужно скрыть.</div>
<pre>
<a class="show_hide" href="#" rel="#slidingDiv_2">Посмотреть</a></pre>
<div id="slidingDiv_2" style="display: none;">Здесь текст который нужно скрыть.</div>
<pre>