Hide/show text

Windbrand · 11-18-2012, 12:31 AM

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:

Code:

<!--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:

Code:

<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>

minder · 11-18-2012, 02:03 AM

Quote:

Originally Posted by Windbrand

Hi can someone find what's wrong with this code?

You haven't posted what errors messages you are getting. But in any case, some might argue that what is wrong with your code is that you are using jquery for something very basic.

If you don't have to use jquery (which is just javascript anyway) here is a simple way of doing it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            .answer{
                display: none;
            }
        </style>
        <script type="text/javascript">
            function hideAnwers(){
                for(i=0; i<answerObj.length; i++){
                    answerObj[i].style.display='none';
                }
            }
            window.onload=function(){
                answerObj = document.getElementsByClassName('answer');
                questionObj = document.getElementsByClassName('question');
                for(i=0; i<questionObj.length; i++){
                    questionObj[i].onclick=function(){
                        hideAnwers();
                        this.getElementsByTagName('div')[0].style.display='block';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div class="qatext">
            <div class="question">
                Q: 1
                <div class="answer">A: 1</div>
            </div>
            <div class="question">
                Q: 2
                <div class="answer">A: 2</div>
            </div>
        </div>
    </body>
</html>

If you have to support old browsers that don't recognise getElementsByClassName(), you can write your own or use one of the several examples on the interweb.