Simple jQuery accordion to show News, Faq, Questions and Answers

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>

The HTML code:

<div id="accordion">
<span>Question No. 1</span>
 
<div class="news_text"><strong>Answer 1</strong>:</div>
 
 
<span>Question No. 2</span>
 
<div class="news_text"><strong>Answer 2</strong>:</div>
 
 
<span>Question No. 3</span>
 
<div class="news_text"><strong>Answer 3</strong>:</div>
</div>

View Demo Download

Be Sociable, Share!
You can leave a response, or trackback from your own site.

7 Responses to “Simple jQuery accordion to show News, Faq, Questions and Answers”

  1. [...] have shown with you simple jQuery accordion for displaying News, Faq, Questions & Answers in the previous post. In that example we can show [...]

  2. Cody says:

    I like the script! I modified it to read from an xml file instead.

  3. Mike says:

    To prevent an already open item from “bouncing” closed and open again when clicked, you can wrap the close/open like so:


    $(‘#accordion p span’).click(function(){
    if ($(this).parent().next().is(“:hidden”)) {
    $(‘#accordion div’).slideUp();
    $(this).parent().next().slideDown();
    }
    return false;
    });

  4. Warren says:

    Nice script. Thanks.

  5. giorgio says:

    Otra manera de solucionar lo mencionado por mike es:

    $(‘.sdc-accordion div’).hide();
    $(‘.sdc-accordion p span’).click(function(){
    if ($(this).parent().next().is(“:hidden”)) {
    $(‘.sdc-accordion div’).slideUp();
    $(this).parent().next().slideDown();
    }else if($(this).parent().next().is(“:visible”)){$(‘.sdc-accordion div’).slideUp();}
    return false;

    });

Leave a Reply

CommentLuv badge
 

Powered by WordPress