Пример реализации раскрывающихся блоков на JS по клику на один из элементов внутри блока.
Задача - есть несколько блоков, один из которых - описание, он должен быть скрытым и раскрываться при нажатии. Вот такой вид блоки имеют изначально:
HTML
<div class="bloki">
<div class="block">
<a id="1" class="kplus"><span>+</span></a>
<h3 class="name">Первый блок</h3>
<div>Текст 1-1</div>
<div>Текст 1-2</div>
<div>Текст 1-3</div>
<p class="text1" style="display: none;">Текст в раскрывающемся блоке</p>
</div>
<div class="block">
<a id="2" class="kplus"><span>+</span></a>
<h3 class="name line">Второй блок</h3>
<div>Текст 2-1</div>
<div>Текст 2-2</div>
<div>Текст 2-3</div>
<p class="text2" style="display: none;">Текст в раскрывающемся блоке</p>
</div>
</div>
Здесь для каждой ссылки (+) присвоен свой уникальный ID, тот же айди добавлен к классу тега <p>, т.е. если тег <a> будет присвоен id="123", то тегу <p>, который и станет скрытым блоком, будет присвоен class="text123".
Для скрытого блока так же добавлено свойство display:none
CSS
.bloki .block {
background: #e7e7e7;
padding: 2px 1%;
margin-bottom: 5px;
min-height: 30px;
}
.bloki .block > div, .bloki .block h3, .bloki .block a {
float: left;
min-width: 18%;
margin: 0px;
font-weight: normal;
font-size: 1em;
padding: 5px;
margin-left: 0.5%;
text-align: center;
}
.bloki .block a.kplus {min-width:10%;}
.bloki .block a.kplus span {
background: #fa5205;
border-radius: 10px;
width: 25px;
height: 25px;
display: block;
font-size: 20px;
line-height: 25px;
cursor:pointer;
color: #fff;
}
.bloki .block p {
clear:both;
margin: 0px;
padding: 10px;
background:#fff;
}
Блоки сильно не оформлял, только что бы показать - что примерно должно получиться в итоге.
Java Script
<script>
jQuery(document).ready(function(){
$('.kplus').on('click', function() {
var theClass = $(this).attr('id');
if ($('.text'+theClass).css('display') == 'none') {
$('.text'+theClass).animate({height: 'show'}, 500);
$('#'+theClass+'.kplus').addClass('viz');
$('#'+theClass+'.kplus span').replaceWith('<span>-</span>');
} else {
$('.text'+theClass).animate({height: 'hide'}, 100);
$('#'+theClass+'.kplus').removeClass('viz');
$('#'+theClass+'.kplus span').replaceWith('<span>+</span>');
}
});
});
</script>
Здесь вначале определяем ID текущей кнопки (тег a), затем проверяем наличие свойства "display:none" у блока с классом textID, где ID - айди кнопки. Если такое свойство есть - показываем блок (show), так же добавляем класс "viz" для кнопки и меняем "+" на "-". Теперь немного дополню CSS т.к. есть возможность выделить кнопку, когда блок показан
Дополнение к CSS
.bloki .block a.viz span {
background: #b1250c;
}
+
Второй блок
Текст 2-1 (У ЭТОЙ СТРОЧКИ 1)
Текст 2-2 (У ЭТОЙ 2)
Текст 2-3 (УЭТОЙ 3)
Текст в раскрывающемся блоке
Как сделать что бы у каждой строчки в блоке был свой индификатор (класс?). и при клике на чекбокс (в моем случае) они бы все отображались
Посмотреть бы Ваш код…
блин, почему то не подключается js все перепробовал
Может конфликтует… а куда вставляете?
Я понял в чем дело, я 0 в js, взял просто скопировал код и вставил, а там редактировать надо еще, I'd прописовать.
Спасибо то что нужно! Очень помогло)