jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
jQuery accordion allows us to show the content of the selected header. Its feature is that only the content of the selected header can be open at once. So it’s useful in showing the news content with header or Frequently asked questions regarding some topic or Questions and Answers etc.
The CSS used:
<style type="text/css">
#accordion { width:700px; margin: 0; padding: 0; }
#accordion p span { cursor:pointer; }
.news-title{
color:#1e6e86;
font: bold 12px Arial;
margin-bottom:10px;
background:#EDEDED;
padding:5px 10px;
}
.news_text{
margin-left:10px;
line-height:18px;
}
</style>jQuery script used:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('#accordion div').hide();
$('#accordion p span').click(function(){
$('#accordion div').slideUp();
$(this).parent().next().slideDown();
return false;
});
});
</script>
Posted in 
Tags: 
