I have recently been playing with jquery and wanted to find the best solution for an FAQ page.
with the code I have found, it works for 1 question, but if I had 30 questions on an FAQ page they would all animate up/down at the same time. Whats the best way to edit this so I can have multiple questions that open individually onclick?
What I have been able to piece together is the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script> $(document).ready(function() { // this line hides all the answers upon load. You could skip this step if you were // to hide it in css by adding "visibility:hidden;display:none" to ".faq_answer_container" // That would be my preferred way of doing it, but I am using the jQuery approach for // illustration purposes. $('.faq_answer_container').toggle(); // do "something" whenever an ".faq_question" is clicked $('.faq_question').click(function() { //here, the "something" simply entails toggling the visibility of the "next" element // that follows "this". Here, "this" refers to the ".faq_question" that was just clicked. $(this).next().toggle(); });});</script><style>/*FAQS*/.faq_question { margin: 0px; padding: 0px 0px 5px 0px; display: inline-block; cursor: pointer; font-weight: bold;}.faq_answer_container { height: 0px; overflow: hidden; padding: 0px;}</style></head><body><div class="faq_container"> <div class="faq"> <div class="faq_question">1. Question goes here</div> <div class="faq_answer_container"> <div class="faq_answer">Answer 1 goes here</div> </div> <div class="faq_question">2. Question goes here</div> <div class="faq_answer_container"> <div class="faq_answer">Answer 2 goes here</div> </div> <div class="faq_question">3. Question goes here</div> <div class="faq_answer_container"> <div class="faq_answer">Answer 3 goes here</div> </div> </div></div></body></html>
Open in new window