Задать вопрос
@Againts7
Сайты
javascript

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

Всем привет! Ребята нужна Ваша помощь. Сайт 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>
  • Вопрос задан
  • 1562 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 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;
}
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо развернуть / внедрить нагрузочное тестирование на проекте
20 нояб. 2024, в 14:06
9000 руб./за проект
Оптимизатор квадратичной функции на Python
20 нояб. 2024, в 14:05
7000 руб./за проект
Разработка ERP системы на базе готового дизайна
20 нояб. 2024, в 13:41
300000 руб./за проект
Ещё заказы