Мы уверены, что данное руководство по созданию переключения видимости контента совершенно точно вам пригодится, потому что его можно быстро и легко реализовать, используя всего лишь jQuery библиотеку.
Этот скрипт использует UL списки и позволяет пользователю переключать видимость контента LI элементов. Такая полезная особенность UI может помочь верстальщикам, потому как им не надо будет строить лишнего HTML и CSS кода и пользователям, смогут просматривать контент только тогда, когда захотят его увидеть.
1. HTML
Создаем UL список, остальное и так понятно.
<ul id="toggle-view">
<li>
<h3>Title 1</h3>
<span>+</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
<li>
<h3>Title 2</h3>
<span>+</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
<li>
<h3>Title 3</h3>
<span>+</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
</li>
</ul>
2. CSS
Мы использовали минимум CSS кода для этого руководства. Самый важный момент в том, чтобы спрятать элемент P.
#toggle-view {
list-style:none;
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:300px;
}
#toggle-view li {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
}
#toggle-view h3 {
margin:0;
font-size:14px;
}
#toggle-view span {
position:absolute;
right:5px; top:0;
color:#ccc;
font-size:13px;
}
#toggle-view p {
margin:5px 0;
display:none;
}
3. Javascript
Это один из самых коротких jQuery кодов!
Назначаем событие нажатия на элемент LI, и теперь, если пользователь кликнет на элемент LI, P станет видимым или наоборот свернется. Кроме того, код будет менять элемент SPAN с минуса на плюс и наоборот, в зависимости от видимости элемента P.
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('p');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
});
});
Надеемся это руководство было вам полезно! :)