Всем привет!

Сейчас я покажу вам как легко создавать блоки которые появляются/исчезают по клику на другом объекте. Обычно они используются в меню, подсказках появляющихся при клике на элемент или просто когда надо скрыть по умолчанию какой-то блок.

Для начала создаем ссылку или абзац и задаем им id или class, чтобы можно было к ним обратиться.

После этого вставляем в вот такой код в страницу:

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
    $(".hider").click(function(){
        $("#hidden").slideToggle("slow");
        return false;
    });
});
// ]]></script>
<a class="hider">Ссылка</a>
<p class="hider">Абзац</p>
 
<div id="hidden" style="display: none;">
Некий текст содержащийся в данном блоке.
По умолчанию он скрыт благодаря свойству display: none;</div>

<div id="hidden" style="display: none;">
Некий текст содержащийся в данном блоке.
По умолчанию он скрыт благодаря свойству display: none;</div>

А затем, вставляем сам блок задав ему id или class, и добавляем свойство display: none;

Благодаря простоте jQuery можно заменить событие, чтобы блок появлялся, например, по наведению курсора, или можно сделать более плавную/быструю анимацию, а уж если использовать animation то тут уже все зависит только от вашей фантазии.

таким образом можно показывать/скрывать любые элементы.
Ниже вы можете посмотреть как это работает.

Ссылка

Абзац

Делаем выпадающий по клику блок

17 комментариев к “Делаем выпадающий по клику блок

  • 03.07.2012 в 21:13
    Постоянная ссылка

    Здравствуйте.
    Что-то у меня не этот скрипт не работает
    Здесь нужно использовать библиотеку jquery?
    а то я просто скопировал и вставил.

    Ответ
    • 03.07.2012 в 22:17
      Постоянная ссылка

      Здравствуйте, Алексей.
      Да, вам необходимо подключить jQuery для использования этого скрипта.

      Ответ
    • 29.09.2013 в 18:34
      Постоянная ссылка

      Алексей, вы можете или добавить всем блокам уникальные ID и повесить на каждый обработчик как в примере, или поменять верстку и переписать примерно так: скрываемый блок помещаем внутрь того по которому надо кликнуть, и делаем обработчик типа
      $(«.hider»).click(function(){
      $(this).children(«.hidden»).slideToggle(«slow»);
      return false;
      });

      таким образом мы при неограниченном количестве групп блок->вложенный блок скрываем/разворачиваем вложенный блок по клику на родителя.

      Ответ
  • 07.05.2014 в 19:21
    Постоянная ссылка

    Здравствуйте! Подскажите пожалуйста как можно менять фон. изображение данного блока при раскрытии/скрытии (плюс на минус)

    Ответ
    • 10.05.2014 в 11:20
      Постоянная ссылка

      Можно или добавлять нужные стили через css, например, $(«#element»).css({‘background’:’#f00′,’border’:’1px solid #0f0′}) или добавлять/убирать классы через addClass/removeClass.

      Ответ
  • 19.02.2015 в 13:35
    Постоянная ссылка

    Добрый день!
    Вот такие вопросы
    1. Я сделал через родителей, можно ли в children сделать активной ссылку? Сейчас я щёлкаю по ссылке и всё сворачивается назад
    2. Как разнести выплывающие блоки стоящих рядом по горизонтали, если пользователь нажмёт сначала на одного родителя, его children появится, а потом нажмёт на соседнего родителя и появится его children, который разместится поверх ранее вызванного
    Спасибо

    Ответ
  • 19.02.2015 в 13:44
    Постоянная ссылка

    Дополнение ко 2 вопросу
    Как сделать чтобы по щелчку на другом блоке, сворачивался уже открытый

    Ответ
    • 19.02.2015 в 17:49
      Постоянная ссылка

      Здравствуйте.
      1) проверьте селекторы которые используете в блоках, видимо не правильно обрабатываются и поэтому сворачивается блок
      2) наплыв блоков может быть из-за неправильного позиционирования, проверьте стили блоков, возможно у них, например, стоит position: absolute;
      Для скрытия всех открытых блоков им надо задать какой-то класс и при клике по новому элементу сперва сворачивать все элементы с этим классом, а потом уже разворачивать новый

      Ответ
  • 20.02.2015 в 16:12
    Постоянная ссылка

    Спасибо за ответы
    Но ситуация несколько поменялась
    Как сделать, чтобы открытый блок закрывался при щелчке вне его, или на другом блоке, при этом раскрывался новый блок заменяя свернувшийся на том же месте и при этом ссылки внутри открывающихся блоков оставались активными

    Ответ
    • 26.02.2015 в 16:52
      Постоянная ссылка

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

      Ответ
    • 16.03.2016 в 20:16
      Постоянная ссылка

      Сам скрипт можно подключить с CDN гугла или яндекса или скачать с официального сайта jquery.com

      Ответ
  • 20.06.2016 в 13:57
    Постоянная ссылка

    Здравствуйте, как сделать , чтоб при клике на определённый элемент появляющийся блок смещал блок ниже его на определённые координаты?

    Ответ
    • 22.06.2016 в 10:57
      Постоянная ссылка

      Не понял, что именно должно получиться. Попробуйте так:

      $(document).ready(function(){
          $(".hider").click(function(){
              // выбираем следующий элемент и задаем ему координаты
              $(this).next().css({"top":10,"left":20});
              return false;
          });
      });
      

      Ответ

Добавить комментарий для Алексей Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

90% сайтов рунета содержат уязвимости и могут быть взломаны! Проверь свой сайт!