jQuery: Create your own Accordion – Very Easy Tutorial
This is a very easy and simple tutorial for an accordion using latest jQuery. The latest version is not essential. Please check the following codes, implement it and let me know if any errors. Thanks:
CSS Code
[css]
#acc_wrap{width:700px; margin:50px auto; color:#FFFFFF}
#acc_wrap ul{list-style-type:none;}
#acc_wrap ul li{margin-bottom:2px;}
#acc_wrap ul li h3{font-size:13px; padding:0 0 0 7px; cursor:pointer; line-height:175%; background:url(images/plus.png) 98% 50% no-repeat #CC9900;}
#acc_wrap ul li h3.active{background:url(images/minus.png) 98% 50% no-repeat #CC9900;}
#acc_wrap ul li p{display:none; padding:7px; background:#0000CC; border-radius:0 0 10px 10px; font-size:12px;}
[/css]
Javascript Code:
[javascript]
$(document).ready(function() {
$(‘#acc_wrap ul li h3’).click(function() {
$(‘#acc_wrap ul li p’).slideUp();
if($(this).hasClass(‘active’))
{
$(‘#acc_wrap ul li h3’).removeClass(‘active’);
}
else
{
$(‘#acc_wrap ul li h3’).removeClass(‘active’);
$(this).addClass(‘active’).parent().find(‘p’).slideDown();
}
});
});
[/javascript]
HTML code:
[html]
-
Maecenas vitae dictum velit
Duis blandit congue libero, eu vehicula lorem viverra et. In et urna non leo dictum laoreet sed sit amet lectus. Vivamus ac mauris dictum mauris ultricies pretium. Morbi eleifend purus vitae ante varius pellentesque. Praesent in libero id metus aliquam sagittis quis vestibulum metus. Maecenas at urna molestie nisi fermentum porta. Integer ac leo sapien. Quisque pharetra vehicula nisi eu feugiat.
-
Vestibulum convallis pellentesque nibh
Nunc facilisis pellentesque lobortis. Praesent ultrices felis nec enim aliquam vulputate. Suspendisse potenti. Etiam tempus dui non mauris cursus convallis. Vestibulum nisi enim, elementum auctor sagittis sit amet, suscipit sed enim. Quisque eget lorem est, a ultricies nisl. Ut quis tincidunt nisi. Phasellus aliquam ante et massa congue at aliquet lectus mattis. Phasellus mattis rhoncus ligula, in bibendum nisi faucibus eu. Fusce placerat nisl ut enim volutpat feugiat. Quisque sed tempor nisi. Nam sit amet massa sed lorem scelerisque ornare eget eu metus. Vivamus augue tellus, aliquam non adipiscing pretium, gravida et augue.
-
Pellentesque consequat augue rutrum
Integer est massa, blandit non luctus sit amet, imperdiet et nisl. Curabitur risus lectus, tempor id tempus et, posuere vitae ante. Mauris ut odio ac augue facilisis scelerisque et luctus arcu. Aliquam et nulla risus. Suspendisse volutpat sapien eu metus condimentum rhoncus. Suspendisse potenti. Donec pellentesque massa non tortor pellentesque in scelerisque est venenatis. Duis eleifend tortor vel metus volutpat semper. Suspendisse potenti. Sed tempor commodo sagittis.
[/html]
That’s it. Please download two images by googling…plus and minus. Thanks. :
