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

Question

Анна Чумаченко @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>

Вопрос задан более трёх лет назад
1588 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее

Решения вопроса 1

6 комментариев

Анна Чумаченко @Againts7 Автор вопроса

Посмотрите пожалуйста! Почему-то не выходит:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Постельное бельё РАЗПРОДАЖА!!!</title>
<style type="text/css">
   .block-of-text{
  height: 0px;
  overflow: hidden;
  transition: height 1s linear;
}
.block-of-text.active{
height: auto;
}
</style>
 </head>
 <body>
 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(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);
    }
  }
})
</script>

<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">Отображаемый блок 3</div>
</body>
</html>

Написано более трёх лет назад

Денис Князев @axaxa_man

Анна Чумаченко, были ошибки в скобках и кавычках.

вот правильная пунктуация:

$(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");
    }
  });
});

Написано более трёх лет назад

Анна Чумаченко @Againts7 Автор вопроса

Денис Князев, это очень хорошо! Но как сделать плавную смену блоков, test.ulitabiz.in.ua/#catalog когда переключаешь вообще не понятно что, что-то происходит т.к. у меня картинки одинаковые, а описание под ними разное. Как бы сделать, как вот здесь postelshop.com эффект плавной смены блоков! Или загрузки. Что-то такое.

Написано более трёх лет назад
Денис Князев @axaxa_man

поиграйте вот с этим свойством: transition: height 1s linear;
в консоли хрома можно выбрать оптимальное время и тип анимации.
и вставьте реальные картинки, чтобы лучше это заметить.

и дополните css
.block-of-text.active{
height: auto;
}

свойством : transition: none;

удачи

Написано более трёх лет назад
Анна Чумаченко @Againts7 Автор вопроса

Вы крутой))))))))))))) Спасибо огромное!!!!!!!

Написано более трёх лет назад
Денис Князев @axaxa_man

Анна Чумаченко, на здоровье, удачи в работе

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- вчера
- 121 просмотр
1

ответ
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 82 просмотра
1

ответ
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 1 подписчик
- 28 окт.
- 84 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 162 просмотра
2

ответа
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 126 просмотров
1

ответ
CSS

Простой
Как такое сверстать?
- 1 подписчик
- 26 окт.
- 265 просмотров
2

ответа
JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 21 окт.
- 218 просмотров
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 172 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 130 просмотров
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 189 просмотров
0

ответов
Показать ещё Загружается…

Web-разработчик/WordPress программист (Full-stack)

JustBusiness • Санкт-Петербург

от 130 000 до 150 000 ₽

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

1. Сделать плавную смену блоков при нажатии на кнопку.
Каких блоков? Смену на что? При нажатии на какую кнопку?

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

Answer 1 · 2018-01-28 16:41:13

Раз 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;
}

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

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

Минуточку внимания

Войдите на сайт