Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Linking questions to answers?

Posted by: justtuningin Mar 6 2007, 03:31 AM

Hey, sorry if this is the wrong place. But I just stumbled on here and I am in desperate need of help. I don't have any site to link to but hopefully the code and description is enough.

I've been trying to have a question link, you click on it and a hidden answer pops out from the question. I've seen this on many sites (I can't find any now... weird?) and always wanted to do it. I found this code here:

CODE

<script language='javascript'>
        function open_close()
        {
            if( document.getElementById( 'LABEL HERE-div' ).style.display == 'none' )
            {
                document.getElementById( 'LABEL HERE-div' ).style.display = '';
            }
            else
            {
                document.getElementById( 'LABEL HERE-div' ).style.display = 'none';
            }
        }
    </script>

    <a href='java script:open_close()'>QUESTION HERE</a>
    <div id='LABEL HERE-div' style='display:none'>
    ANSWER HERE
    </div>

Now it works great with one, but when I put up another each link I hit goes to the last one's answer. Example code:

CODE

<script language='javascript'>
        function open_close()
        {
            if( document.getElementById( 'question1-div' ).style.display == 'none' )
            {
                document.getElementById( 'question1-div' ).style.display = '';
            }
            else
            {
                document.getElementById( 'question1-div' ).style.display = 'none';
            }
        }
    </script>

    <a href='java script:open_close()'>Here's a question?</a>
    <div id='question1-div' style='display:none'>
    Here should be the answer!
    </div>
<BR>

<script language='javascript'>
        function open_close()
        {
            if( document.getElementById( 'question2-div' ).style.display == 'none' )
            {
                document.getElementById( 'question2-div' ).style.display = '';
            }
            else
            {
                document.getElementById( 'question2-div' ).style.display = 'none';
            }
        }
    </script>

    <a href='java script:open_close()'>This is another?</a>
    <div id='question2-div' style='display:none'>
    Blibidyblobbidybloo hehe Sorry needed an ice breaker
    </div>

I've tried many alternatives, but none have been successful. Is there anything I'm doing wrong, or is it a bad code? Again, just stumbled on these forums so I am not sure if this is in the right place. Sorry if it isn't

ETA: Just in case somebody already posted this, I used the search and found nothing. Sorry if this has already been asked... probably not. Just making sure.

Posted by: Frederiek Mar 6 2007, 04:12 AM

You only need the script function once and set an argument to the function, some like this:

CODE

<script type="text/javascript">

</script>

    <a href="java script:open_close('answer1')">QUESTION HERE</a>
    <div id='answer1' style='display:none'>ANSWER HERE</div>
    <a href="java script:open_close('answer2')">QUESTION 2 HERE</a>
    <div id='answer2' style='display:none'>ANSWER 2 HERE</div>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)