Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Раскрывающийся и сворачивающийся по клику блоки
Раскрывающийся и сворачивающийся по клику блоки
workman
Дата: Вторник, 10.10.2017, 17:37 | Сообщение # 1
Гл. Модератор
Сообщений:1664
Награды: 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
Администраторы
Сообщений:15490
Награды: 50


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


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

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


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)

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


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



Код
<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(29Kb)
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Раскрывающийся и сворачивающийся по клику блоки
Страница 1 из 11
Поиск: