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

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>

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

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

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

Решения вопроса 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

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

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

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

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- 17 минут назад
- 13 просмотров
0

ответов
JavaScript

+1 ещё

Средний
При создании PWA ошибка Cannot read properties of null (reading 'prompt'), в чем проблема?
- 1 подписчик
- 3 часа назад
- 25 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 3 часа назад
- 81 просмотр
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 14 часов назад
- 37 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 19 часов назад
- 43 просмотра
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 19 часов назад
- 52 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 20 часов назад
- 128 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 22 часа назад
- 47 просмотров
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 109 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 88 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Помощь СММ-специалиста

25 апр. 2024, в 11:49

25000 руб./за проект

Помощь с СЕРМ

25 апр. 2024, в 11:37

40000 руб./за проект

Кастомизация стандартного функционала Битрикс24

25 апр. 2024, в 11:33

7000 руб./за проект

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;
}

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

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

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

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