Linking questions to answers?, Found this code and I am confused Options

[justtuningin]

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.

This post has been edited by justtuningin: Mar 6 2007, 03:34 AM

[Frederiek]

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

CODE

<script type="text/javascript">
<!--
   function open_close(id) {
      if (document.getElementById(id).style.display == 'none') {
         document.getElementById(id).style.display = 'block';
      }  else {
         document.getElementById(id).style.display = 'none';
      }
   }
//-->
</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>