Add FAQ Simple Accordion to HTML Page

How to add an Accordion to Your FAQ Page.

It is Very Simple to use and less jquery.

You need to add just css, Jquery , and body part to your page where you want to add FAQ Accordion.

Lets Start,

1.Add This Code to Your Body Part.

<div id="accordion">
<p class="news-title"><span>Accordion FAQ Question1</span></p>
<div class="news_text"> <strong>Answer</strong>:
  <p>This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. </p>
</div>


<p class="news-title"><span>Accordion FAQ Question2</span></p>
<div class="news_text"> <strong>Answer</strong>:
  <p>This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. This is Answer. </p>
</div>

2. Add Jquery code inside your Head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--http://www.itechroom.com-->
$(document).ready(function($) {
       $('#accordion div').hide();
       $('#accordion p span').click(function(){
               $('#accordion div').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
});

</script>

3.Add Style for Accordion.

<style type="text/css">
#accordion {
width:100%;
margin: 0;
padding: 0;
}
#accordion p span {
cursor:pointer;
font-size: 15px;
font-family: calibri;
}
.news-title {
color: #1E6E86;
font: bold 12px calibri;
margin-bottom: 10px;
background: #EDEDED;
padding: 12px 10px;
border-radius: 10px;
}
.news_text {
margin-left: 10px;
line-height: 18px;
padding: 10px;
font-family: calibri;
text-align: justify;
}
</style>

Thats all, Set all this items in your Page. and use Accordion style for your FAQ page.