• Страница 1 из 1
  • 1
Форум » Самоучитель HTML и CSS » Коды HTML для сайта » Раскрывающийся и сворачивающийся по клику блоки
Раскрывающийся и сворачивающийся по клику блоки
workman
Дата: Вторник, 10.10.2017, 17:37 | Сообщение 1
Гл. Модератор
Сообщений:1705
Награды: 8


Есть несколько div, при клике на которые разворачивается скрытый текст а при клике на другой верхние сворачиваются.

HTML

Код
<div class="view-source">
  <a href="#">Открыть 1</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">Открыть 2</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">Открыть 3</a>
  <div class="hide">Спрятанный текст</div>
</div>

Ну и в нижнюю часть сайта или отдельным файлом вставляем
Код
<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
      $(this).next().slideToggle(500);
    });
});
</script>


Как работает, можем посмотреть в песочнице
Страна: (RU)
Kosten
Дата: Вторник, 10.10.2017, 18:05 | Сообщение 2
Администраторы
Сообщений:16793
Награды: 55


workman, привет! Это больше на сполер похрже, под кнопки постамить можно?
Страна: (RU)
workman
Дата: Вторник, 10.10.2017, 18:18 | Сообщение 3
Гл. Модератор
Сообщений:1705
Награды: 8


Цитата Kosten ()
под кнопки постамить можно?

Конечно можно ... Можно самим прописать кнопку через css
Например к самой ссылке прописать class="button" и воспользоваться сервисом этим или этим


Сообщение отредактировал
workman - Вторник, 10.10.2017, 18:21
Страна: (RU)
Kosten
Дата: Вторник, 10.10.2017, 21:23 | Сообщение 4
Администраторы
Сообщений:16793
Награды: 55


На чистых стилях красивее можно сделать.Где еще идет настройка, как на заголовок и обвод, где идет описание.



Код
<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">Нажмите здесь</label>
<div>Когда AMD запустила Vega , один из аргументов, который он сделал, - архитектура будет иметь сильные ноги и окажется хорошо сбалансированной в будущих рабочих нагрузках. Очевидно, что одно название не собирается доказывать эту теорию так или иначе, но хорошо видеть, что Вега сильно ударяет по воротам. Общее энергопотребление по-прежнему благоприятствует Nvidia, но настольные геймеры склонны рассматривать шум как грубый прокси-сервер для энергопотребления, то есть, хотя есть определенные покупатели, которые заботятся обо всех, большинство клиентов сначала предпочитают тихие карточки, а карты с более низкой мощностью второй.</div>


CSS:

Код
.hide, .hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label,
.hide:checked + label {
    padding: 0;
    color: green;
    cursor: pointer;
    border-bottom: 1px dotted green;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block;
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px;
}


Демонстрация:
Прикрепления: 8465645.png(28.8 Kb)
Страна: (RU)
wwwr22ru
Дата: Воскресенье, 20.05.2018, 00:44 | Сообщение 5
Пользователи
Сообщений:1
Награды: 0


Если еще прикрутить плавное открытие контента, было-бы красиво

Alexander V.Govyazin [aka AGr0]
维克多的儿子亚历山大
+7-960-9645666 Beeline
+7-923-1645666 M T S
Ru-Tel:.745666
Страна: (RU)
-SAM-
Дата: Воскресенье, 20.05.2018, 14:27 | Сообщение 6
Друзья сайта
Сообщений:413
Награды: 18


wwwr22ru, css-свойство transition и opacity в помощь. Еще в сети нарыл пример: jsfiddle.net/ERAFY/x8FQJ/1/ (и пока искал, то вот наткнулся на такое Доступно только для пользователей, где это всё разбирается - разные варианты решения, что может пригодиться)... вот я переписал: jsfiddle.net/Lrtrvzjs/19/ (вроде, неплохо получилось... если не понравится то, что оно как бы вправо выезжает в самом блоке текст, то это не добавленный мною эффект, а просто transition на padding тоже действует, как понял, а нужно только было для opacity и для height).
Ну, а в скриптовом варианте и так есть, что просто менять там скорость (в материале прописано 500ms - менять цифры или словами можно задать slow = 600, normal = 400 и fast = 200)... можно еще анимацию какую-то прикрутить.




Сообщение отредактировал
-SAM- - Воскресенье, 20.05.2018, 16:20
Страна: (UA)
Форум » Самоучитель HTML и CSS » Коды HTML для сайта » Раскрывающийся и сворачивающийся по клику блоки
  • Страница 1 из 1
  • 1
Поиск: