Toggle Content using jquery

Toggle Content using jquery


Download

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$(".toggle_content").hide();
$("h3.toggle").toggle(function(){
 $(this).addClass("active");
 }, function () {
 $(this).removeClass("active");
});

$("h3.toggle").click(function(){
 $(this).next(".toggle_content").slideToggle();
});
});
</script>
<style>
.toggle, h3.toggle {
cursor:pointer;
background:url(images/toggle_plus.gif) 98% 5px #d0d0d0 no-repeat;
padding:10px;
line-height:inherit;
margin:20px 0;
width:621px;
border-radius: 5px 5px 5px 5px;
}
.toggle.active {
background:url(images/toggle_minus.gif) 98% 5px #d0d0d0 no-repeat;}
.toggle_content {
margin-left:10px;
padding:15px;
background:#f2f2f2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:20px;
width:602px;
}
.toggle_content .faq_list {
margin:10px 0 0 0;

}
.dropcap1 {
color:#444e69;
display:block;
float:left;
font-size:28px;
line-height:28px;
font-style:italic;
text-shadow:#fff 1px 1px 1px;
font-family:Georgia, "Times New Roman", Times, serif;
}
</style>

<h2>Toggle Content</h2>
<h3 class="toggle box">Frequently asked questions:</h3>
<div class="toggle_content">

                      <div class="faq_list">
                
                          <div class="faq_question">
                              <span class="dropcap1">Q:</span> <strong>Ut enim ad minim veniam, quis nostrud exerc</strong>
                          </div>
                          <div class="faq_answer">
                              <span class="dropcap1" style="padding-left:40px;">A:</span><p style="padding-left:10px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui</p>
                          </div>
                        
                          <div class="faq_question">
                              <span class="dropcap1">Q:</span> <strong>Ut enim ad minim veniam, quis nostrud exerc?</strong>
                          </div>
                          <div class="faq_answer" style="padding-left:40px;">
                              <span class="dropcap1">A:</span><p style="padding-left:10px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui</p>
                          </div>
                        
                          <div class="faq_question">
                              <span class="dropcap1">Q:</span> <strong>Ut enim ad minim veniam, quis nostrud exerc?</strong>
                          </div>
                          <div class="faq_answer" style="padding-left:40px;">
                              <span class="dropcap1">A:</span><p style="padding-left:10px;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui</p>
                          </div>
                        
                      </div>
</div>
    
<h3 class="toggle box">Toggle Content 2</h3>
  <div class="toggle_content">
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquiad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui
  </div>