www.webdeveloper.com
Results 1 to 4 of 4

Thread: have hidden text appear when clicking a button, or selecting text, or check box, etc

  1. #1
    Join Date
    Apr 2011
    Posts
    15

    have hidden text appear when clicking a button, or selecting text, or check box, etc

    hi

    i have this text, a question:
    (visible text)

    "1. if so and so does x then

    A. answer A here
    B. answer B here
    C. answer C here
    D. answer D here"

    then what i want is when the user selects one of the answers, the answer, which is hidden will appear beneath the question

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Lightbulb

    One possible solution ...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    <style type="text/css">
     li { list-style-type:none; text-indent:2em; line-spacing:1.5em; }
    .answer { color:red; }
    </style>
    
    </head>
    <body>
    I have this text, a question:
    (visible text)
    
    <div id="review">
     <ul> <b>1. if so and so does x then:</b> <br>
      <li> <input type="radio" name="q1" value='a1' onclick="showAnswer(this.value)">
           A. y is the dependent variable
           <div id='a1' class="answer">answer A here<p></div>
      </li>
      <li> <input type="radio" name="q1" value='b1' onclick="showAnswer(this.value)">
           B. y is another independent variable
           <div id='b1' class="answer">answer B here<p></div>
      </li>
      <li> <input type="radio" name="q1" value='c1' onclick="showAnswer(this.value)">
           C. a<sup>2</sup> is a constant
           <div id='c1' class="answer">answer C here<p></div>
      </li>
      <li> <input type="radio" name="q1" value='d1' onclick="showAnswer(this.value)">
           D. b<sup>2</sup> is a variable
           <div id='d1' class="answer">answer D here<p></div>
      </li>
      <p>
     </ul>
    
     <ul> <b>2. if this and that does these then:</b> <br>
      <li> <input type="radio" name="q1" value='a2' onclick="showAnswer(this.value)">
           A. y is the dependent variable
           <div id='a2' class="answer">answer A here<p></div>
      </li>
      <li> <input type="radio" name="q1" value='b2' onclick="showAnswer(this.value)">
           B. y is another independent variable
           <div id='b2' class="answer">answer B here<p></div>
      </li>
      <li> <input type="radio" name="q1" value='c2' onclick="showAnswer(this.value)">
           C. a<sup>2</sup> is a constant
           <div id='c2' class="answer">answer C here<p></div>
      </li>
      <li> <input type="radio" name="q1" value='d2' onclick="showAnswer(this.value)">
           D. b<sup>2</sup> is a variable
           <div id='d2' class="answer">answer D here<p></div>
      </li>
      <p>
     </ul>
    
    </div>
    
    <script type="text/javascript">
    function showAnswer(info) {
      document.getElementById(info).style.display = 'block';
    }
    
    window.onload = function() {
      var sel = document.getElementById('review').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
    }
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Apr 2011
    Posts
    15
    thanks.

    i went with something similar

    <head>

    <script type="text/javascript">
    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }
    </script>

    </head>

    <body>

    <a href="javascript:toggle('text')">See text </a><div id="text" style="display: none;">
    Text to see here

    </div>

    ---

    thanks for your reply. i like the radio button style

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Lightbulb

    You're most welcome.
    Happy to help.

    Note, your version will still require unique 'id' values.
    Although it legal, it's not a good idea to use reserved words (text) as 'id' values.
    Also, do not need to use the 'javascript:' prefix in the href= anchor tag.
    And, you could substitute 'inline' for 'block' if you do not use the '' style setting in the toggle function

    For example:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    
    <style type="text/css">
    .answers { display:none; }
    </style>
    
    </head>
    <body>
    
    <a href="#" onclick="return toggle('txt')">See text</a><br>
    <div id="txt" class="answers">Text to see here</div>
    
    <a href="#" onclick="return toggle('txt1')">See another text</a><br>
    <div id="txt1" class="answers">More text to see here</div>
    
    <script type="text/javascript">
    function toggle(el) {
      document.getElementById(el).style.display
        = (document.getElementById(el).style.display == "none") ? "block" : "none";
    // could substitute 'inline' for 'block' in above line
      return false;
    }
    window.onload = function() {
      var sel = document.getElementsByClassName('answers');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
    }
    </script>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles