@Againts7
Сайты

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

Всем привет! Ребята нужна Ваша помощь. Сайт test.ulitabiz.in.ua делаю КАТАЛОГ.
Задача: 1. Сделать плавную смену блоков при нажатии на кнопку. 2. Чтобы при повторном нажатии блок не сворачивался.
Код:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
function openbox(id) {
  var all = document.querySelectorAll(".block-of-text");
  for (var i = 0; i < all.length; i++) {
    if (all[i].id == id) {
      all[i].style.display = (all[i].style.display == 'none')? 'block' : 'none';
    } else {
      all[i].style.display = 'none';
    }
  }
}
</script>

<a href="#" onclick="openbox('box1'); return false">Записаться</a>
<a href="#" onclick="openbox('box2'); return false">Записаться</a>
<a href="#" onclick="openbox('box3'); return false">Записаться</a>
<a href="#" onclick="openbox('box4'); return false">Записаться</a>

<div class="block-of-text" id="box1" ">Отображаемый блок 1</div>
<div class="block-of-text" id="box2" style="display: none;">Отображаемый блок 2</div>
<div class="block-of-text" id="box3" style="display: none;">Отображаемый блок 3</div>
<div class="block-of-text" id="box4" style="display: none;">Отображаемый блок 3</div>
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
  • axaxa_man
    @axaxa_man
    web developer
    Раз dы используете jQuery, можно через jQuery писать.
    И надо организовать, чтобы при добавлении нового блока, скрипт нам менять не пришлось.

    Вёрстку можно сделать вот так:

    <a href="#" class="js-open-box" data-target="#box1">Записаться</a>
    <a href="#" class="js-open-box" data-target="#box2">Записаться</a>
    <a href="#" class="js-open-box" data-target="#box3">Записаться</a>
    <a href="#"  class="js-open-box" data-target="#box4">Записаться</a>
    
    <div class="js-block-of-text block-of-text" id="box1">Отображаемый блок 1</div>
    <div class="js-block-of-text block-of-text" id="box2">Отображаемый блок 2</div>
    <div class="js-block-of-text block-of-text" id="box3">Отображаемый блок 3</div>
    <div class="js-block-of-text block-of-text" id="box4">Отображаемый блок 4</div>


    И потом меняет js
    $(document).ready(function(){
      $('.js-open-box').click(function(){
        var id = $(this).attr("data-target");
        if ( !$(id).hasClass("active") ){
          $(".js-block-of-text").removeClass("active");
          $(id).addClass("active");
        }
      });
    })


    И в CSS делаем появление:

    .block-of-text{
      height: 0px;
      overflow: hidden;
      transition: height 1s linear;
    }
    .block-of-text.active{
    height: auto;
    }
    Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы