Hide/show text

This site is best viewed in a modern browser with JavaScript enabled.

Windbrand

Hi can someone find what's wrong with this code? It's a Q/A page, where all the answers are hidden at first, then an answer is displayed when a question is clicked (after hiding all other displayed answers). It's not working at all.

JS:

<!--Q&A text-->
	<script type="text/javascript">

	$(document).ready(function() {
		$('.answer').hide();  
		$('.question').click(function() {
			var $nextDiv = $(this).next();
			var $visibleSiblings = $nextDiv.siblings('div:visible');

			if ($visibleSiblings.length ) {
				$visibleSiblings.slideUp('fast', function() {
				$nextDiv.slideToggle('fast');
			});
			} else {
				$nextDiv.slideToggle('fast');
			}
		});
	});

</script>

HTML:

<div class="qatext">
	<div class="question">Q: 1</div>
	<div class="answer">A: 1</div>
        <div class="question">Q: 2</div>
	<div class="answer">A: 2</div>
</div>

ReFreezed

You forgot to specify that only the ".answer" siblings should be hidden after the click. Now questions also gets hidden.

Windbrand;1235177 wrote:

    <script type="text/javascript">

    $(document).ready(function() {
        $('.answer').hide();  
        $('.question').click(function() {
            var $nextDiv = $(this).next();
            var $visibleSiblings = $nextDiv.siblings('div[B][COLOR=#ff0000].answer[/COLOR][/B]:visible');

            if ($visibleSiblings.length ) {
                $visibleSiblings.slideUp('fast', function() {
                $nextDiv.slideToggle('fast');
            });
            } else {
                $nextDiv.slideToggle('fast');
            }
        });
    });

</script>

Windbrand

Thank you I will try that.