Hi,
I was wondering if anyone can spot a problem with why my code won't work? I want an FAQ page to load with only questions, and for the answer to appear under the question when it is clicked.
The code on my main page is:
faq.js is:HTML Code:<!--HEAD--> <script type="text/javascript" src="includes/faq.js"></script> <script type="text/javascript" src="includes/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="includes/jquery-ui-1.8.11.custom.min.js"></script> <!--BODY--> <div class="faq_items"> <div class="faq_item"> <h2><a href="#">Test Question?</a></h2> <div class="faq_body"> <p>Test Answer</p> </div> </div> </div>
Am I missing something? Or maybe forgot to include a jquery file?Code:jQuery( document ).ready( function() { jQuery( ".faq_item .faq_body" ).hide(); jQuery( ".faq_item h2" ).click( function (event) { event.preventDefault(); var $this = jQuery( this ); if( $this.siblings( ".faq_body" ).hasClass( "faq_item_showing" ) ) { $this.siblings( ".faq_body" ).slideUp(); } else { jQuery( ".faq_item_showing" ).slideUp().removeClass( "faq_item_showing" ); $this.siblings( ".faq_body" ).addClass( "faq_item_showing" ).slideDown(); } }); });
Thanks,
Rhys



Reply With Quote
Bookmarks