Here's a fiddle: http://jsfiddle.net/YF8cg/
Focussing entirely on the javascript and on the structure of the HTML (.qapair .question and .answer
), how could I improve this system?
JS:
$(document).ready(function() {
$('.question').click(function() {
$(this).siblings('.answer').slideToggle(400); // Display the clicked answer
$(this).parents('.QApair').siblings('.QApair').children('.answer').each( // Hide all the others
function() {
if($(this).is(':visible')) { // Detects if it's visible
$(this).slideToggle(400); // If true then toggles it
}
});
});
});
HTML:
<div class="qapair">
<h4 class="question">First Question</h4>
<div class="answer">Here would be lods of boring text, or some images, or some tables, or some fish, or some lets-pick-another-random-nouns, you get the picture. I just needed to fill space.
</div>
</div>
<div class="qapair">
<h4 class="question">Second Question</h4>
<div class="answer">I've run out of anything to write. So keyboard spas in 5... 4... 3... 2... 1... agdkfdakgjajgjregafgi iej fujagijrfgj rhgjahngufg ughuafng uuagj u unhu up u dnfajng hfgnajgnurngr gugnjfngja uugf n ndnfaung urgjangjnfg. That was interesting....
</div>
</div>
I'm fairly new to jQuery, so any help would be appreciated.
Thanks in advance.