RealAdmin.ru

Плагин jquery для показа и скрытия элемента или блока по клику

jQuery,HTML,JavaScript
Категория: Кодинг
01 Мар 2015 г. в 13:27

Представляю Вашему вниманию небольшой jquery плагин, который позволит организовать скрытие и показ элементов/блоков, при килке на какой-то определённый другой элемент — ссылку, часть текста, изображение. В общем, это не важно.

(Скрыть/Показать элементы с class=show-block) | (Скрыть/Показать элементы с id=block-3)

Для начала скачиваем плагин по следующей ссылке. Загружаем на сайт и подключаем, предварительно убедившись, что jquery библиотека так же подключена.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="/RealShowHide.js"></script>

Теперь определяемся с элементами, при клике на которые должны появляться те или иные блоки. Этим элементам мы должны присвоить класс, например ShowElement. Затем каждому из этих элементов пропишем аттрибут data-element. В нём укажем, какие блоки показывать и скрывать при клике.

    <span class="ShowElement" data-element=".show-block">(Show/Hide elements with class=show-block)</span> | 
    <span class="ShowElement" data-element="#block-3">(Show/Hide element with id=block-3)</span>
	
    <div class="show-block" style="display: none;">Block 1</div>
    <div class="show-block" style="display: none;">Block 2</div>
    <div id="block-3" style="display: none;">Block 3</div>
	
    <script>
        $('.ShowElement').RealShowHide({'speed':'fast'});
    </script>

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

  • fast — быстро;
  • slow — медленно.
Теги:
Посмотрите похожее — 6
Комментарии — 4
  1. avatar Сергей 14 августа 2015, 13:09 #
    Здравствуйте. Я попробовал прицепить этот плагин на div. Чтобы при нажатии на div Появлялся блок. Но у меня ничего не вышло. Если вешаешь на span все ок. Можно как-то это сделать?
    1. avatar Simkin Andrew 14 августа 2015, 18:47 #
      Да вообще плагину все равно какой элемент, у меня в примерах на div повешено. Так что дело в чём то другом. Либо неправильно на div повешен плагин, либо у div есть какие-то стили, которые ему мешают отображаться как тебе надо.
    2. avatar Автор 23 сентября 2016, 09:46 #
      вы чо издеваетесь такие детские плагины))
      Нужен плагин для складывая двух чисел. НА Jquery)
      1. avatar Simkin Andrew 23 сентября 2016, 09:54 #
        Сорри, только для вычитания есть)
      © REALADMIN.RU   2016 г.
      Страница сгенерирована: 0,1349 s | 10 mb.
      На каком уровне Вы играете в шахматы?
      О П Р О С
      Home Question Top