|
Раскрывающийся и сворачивающийся по клику блоки
|
|
| workman | Вторник, 10 Октября 2017, 17:37 | Сообщение 1 |
| Есть несколько 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 Октября 2017, 18:05 | Сообщение 2 |
| workman, привет! Это больше на сполер похрже, под кнопки постамить можно?
| | [ RU ] |
| |
| workman | Вторник, 10 Октября 2017, 18:18 | Сообщение 3 |
|
| Цитата Kosten (  ) под кнопки постамить можно?
Конечно можно ... Можно самим прописать кнопку через css
Например к самой ссылке прописать class="button" и воспользоваться сервисом этим или этим
Сообщение отредактировал
workman - Вторник, 10 Октября 2017, 18:21 | | [ RU ] |
| |
| Kosten | Вторник, 10 Октября 2017, 21:23 | Сообщение 4 |
|
| На чистых стилях красивее можно сделать.Где еще идет настройка, как на заголовок и обвод, где идет описание.
Код <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;
}
Демонстрация:
| | [ RU ] |
| |
| wwwr22ru | Воскресенье, 20 Мая 2018, 00:44 | Сообщение 5 |
| Если еще прикрутить плавное открытие контента, было-бы красиво
Alexander V.Govyazin [aka AGr0]
维克多的儿子亚历山大
+7-960-9645666 Beeline
+7-923-1645666 M T S
Ru-Tel:.745666
| | [ RU ] |
| |
| -SAM- | Воскресенье, 20 Мая 2018, 14:27 | Сообщение 6 |
| wwwr22ru, css-свойство transition и opacity в помощь. Еще в сети нарыл пример: jsfiddle.net/ERAFY/x8FQJ/1/ (и пока искал, то вот наткнулся на такое Доступно только для пользователей, где это всё разбирается - разные варианты решения, что может пригодиться)... вот я переписал: jsfiddle.net/Lrtrvzjs/19/ (вроде, неплохо получилось... если не понравится то, что оно как бы вправо выезжает в самом блоке текст, то это не добавленный мною эффект, а просто transition на padding тоже действует, как понял, а нужно только было для opacity и для height).
Ну, а в скриптовом варианте и так есть, что просто менять там скорость (в материале прописано 500ms - менять цифры или словами можно задать slow = 600, normal = 400 и fast = 200)... можно еще анимацию какую-то прикрутить.
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Сообщение отредактировал
-SAM- - Воскресенье, 20 Мая 2018, 16:20 | | [ UA ] |
| |
| AGr0 | Суббота, 24 Ноября 2018, 06:57 | Сообщение 7 |
| Спасибо, может пригодится 
| | [ RU ] |
| |
