Домой / Уроки и мануалы по сайтостроению / Как скрыть/показать блок по клику

Как скрыть/показать блок по клику

Часто, при создании своего сайта, возникает необходимость сделать блок, который можно скрыть/показать по клику. Это можно сделать, если добавить в код немного js, совсем немного. Давайте поговорим о том, как скрыть/показать блок по клику.

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

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

Как сделать обычный блок по клику?

Вот код, который необходимо вставить в html:

<html>
  <head>
    <title>Страница</title>

    <script type="text/javascript">
    function viewdiv(id){
    var el=document.getElementById(id);
    if(el.style.display=="block"){
    el.style.display="none";
    } else {
    el.style.display="block";
    }
    }
    </script>
  </head>

  <body>
    <a href="javascript:void(0);" onclick="viewdiv('mydiv');">Показать блок</a>
    <div id="mydiv" style="display:none;">Тут текст, который открывается</div>
  </body>
</html>
  • Зеленым цветом я выделил скрипт, который подключается для работы блока.
  • Оранжевым цветом основная часть, где мы создали открывающийся блок.

Вот, в принципе, и все. Если нужно сделать несколько таких блоков, то каждому новому блоку нужно задавать уникальный div id (в коде я выделил его синим цветом). Например, в одном блоке mydiv, в другом можно mydiv2, потом mydiv3 и т. д. Но во втором варианте с плавным открытием блока, который мы с Вами рассмотрим далее, так извращаться не нужно. То есть не нужно задавать уникальный id, а это удобнее, потому как это поможет сэкономить время.

Я бы не рекомендовал данный вариант, потому как считаю следующий вариант более удобным и привлекательным.

Как сделать блок по клику с плавным открытием?

Сперва посмотрим, как делать блок, который изначально открыт, а вот по клику на них - он будет закрываться.

Итак, для начала в Html код подключим строчку, которая нужна для правильной работы Js на странице:

<html>
  <head>
    <title>Страница</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  </head>
</html>

Далее вставляем код js, который необходим для работы нашего блока:

<html>
  <head>
    <title>Страница</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    $('.spoiler_links').click(function(){
    $(this).parent().children('div.spoiler_body').toggle('normal');
    return false;
    });
    });
    </script>
  </head>
</html>

Осталось только создать сам блок. Для лучшего понимания работы создадим сразу 2 блока:

<html>
  <head>
    <title>Страница</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    $('.spoiler_links').click(function(){
    $(this).parent().children('div.spoiler_body').toggle('normal');
    return false;
    });
    });
    </script>
  </head>

  <body>
    <div>
      <a href="" class="spoiler_links">Блок №1 (кликните для показа/скрытия)</a>
      <div class="spoiler_body">
        Текст, появляющийся при открытии блока 1
      </div>
    </div>

    <div>
      <a href="" class="spoiler_links">Блок №1 (кликните для показа/скрытия)</a>
      <div class="spoiler_body">
        Текст, появляющийся при открытии блока 2
      </div>
    </div>
  </body>

</html>

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

Но это блоки, которые изначально открыты. Мы же можем сделать так, чтобы они были закрыты при загрузке страницы, а уже при нажатии они открывались. Для этого в код html нужно вставить стили для блоков:

<style>
  .spoiler_body {display:none;}
  .spoiler_links {cursor:pointer;}
</style>

Вставьте этот код перед основным текстом, после открывающего тега <body>.

Вот, что в итоге у нас получилось (можете покликать):

Блок №1 (кликните для показа/скрытия)

Текст, появляющийся при открытии блока 1

Блок №2 (кликните для показа/скрытия)

Текст, появляющийся при открытии блока 2

Если Вы хотите, чтобы на странице мог быть открыт только один блок, то есть при нажатии на любой другой - первый закрывался, то поменяйте основной скрипт на этот:

<script type="text/javascript">
  $(document).ready(function(){
  $('.spoiler_links').click(function(){
  if ($(this).next('.spoiler_body').css("display")=="none") {
  $('.spoiler_body').hide('normal');
  $(this).next('.spoiler_body').toggle('normal');
  }
  else $('.spoiler_body').hide('normal');
  return false;
  });
  });
</script>

Изменяем скорость появления блока

Для того, чтобы изменить скорость появления блока, в коде js, который мы указали для работы скрипта, изменяем значение mormal. Вот, как будет выплывать блок при различных значениях:

  • slow - медленно;
  • normal - средне;
  • fast - быстро.

Вот этот код, где нужно заменить это значение: 

    <script type="text/javascript">
    $(document).ready(function(){
    $('.spoiler_links').click(function(){
    $(this).parent().children('div.spoiler_body').toggle('normal');
    return false;
    });
    });
    </script>

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован.