Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Hide/show text

  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Hide/show text

    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>

  • #2
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Windbrand View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •