Web Analytics Made Easy -
StatCounter FAQ Drop-Down A when Q is clicked? - CodingForum

Announcement

Collapse
No announcement yet.

FAQ Drop-Down A when Q is clicked?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • FAQ Drop-Down A when Q is clicked?

    Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked?

    For example: https://www.facebook.com/help/?page=1145

    Facebook has something like that available.

    Any ideas?

  • #2
    Originally posted by Squishy435 View Post
    Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked?

    For example: https://www.facebook.com/help/?page=1145

    Facebook has something like that available.

    Any ideas?
    Here is another example that I managed to find: http://www.thereconnection.com/faq

    Comment


    • #3
      here's something to get you started ...

      Code:
      <HTML>
      <BODY>
      <DIV STYLE="cursor:hand;cursor:pointer"
      onclick="document.getElementById('hidden').style.display='inline'"
      >whassup?
      </DIV>
      <div id="hidden" style="display:none">nadda<br></div>
      hiyas
      </BODY>
      </HTML>
      Last edited by DaveyErwin; Aug 27, 2011, 07:26 PM.

      Comment


      • #4
        Slight modification from last post to include a bit more JS and some CSS.

        Only advantage is that click on question box shows/hides the answer
        and the box makes it easier to know where to put cursor for mouse click.

        Code:
        <!DOCTYPE HTML>
        <html>
        <head>
        <title> FAQ Display </title>
        <style type="text/css">
         .FAQ { cursor:hand; cursor:pointer;
                border:1px solid red; width:50%; }
         .FAA { display:none; }
        </style>
        <script type="text/javascript">
        function toggle(Info) {
          var CState = document.getElementById(Info);
          CState.style.display = (CState.style.display != 'block')
                               ? 'block' : 'none';
        }
        </script>
        </head>
        <body>
        <h2>FAQ section</h2>
        
        <DIV class="FAQ" onclick="toggle('faq1')">
         whassup?
         <div id="faq1" class="FAA">nadda</div>
        </DIV>
        
        <DIV class="FAQ" onclick="toggle('faq2')">
         whassup now?
         <div id="faq2" class="FAA">still nadda</div>
        </DIV>
        
        <DIV class="FAQ" onclick="toggle('faq3')">
         How about now?
         <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
        </DIV>
        
        </body>
        </html>

        Comment


        • #5
          Originally posted by Squishy435 View Post

          For example: https://www.facebook.com/help/?page=1145

          Facebook has something like that available.
          This has the up/down arrows functionality like on Fb.

          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>
                  <title></title>
                  <style type="text/css">
                      ul {
                          list-style-type: none
                      }
                      .more_content {
                          margin: 10px 0px 0px 50px;
                          padding: 5px 5px 5px 5px;
                          width: 200px;
                          height: 100px;
                          border: 1px solid black;
                          overflow: auto;
                          display: none
                      }
                      span {
                          padding: 0px 0px 0px 50px;
                      }
                      span:hover {
                          cursor: pointer;
                      }
                  </style>
                  <script type="text/javascript">
                      function showHideMore(obj) {
                          var contObj = obj.parentNode.getElementsByTagName('div')[0];
                          var status = (contObj.style.display == 'block')? 'none' : 'block'
                          contObj.style.display = status;
                          obj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
                          obj.curPic = (obj.curPic == 0)? 1 : 0;
                          obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
                      }
                      window.onload=function(){
                          plusMinusPics = ['plus.png','minus.png'];
                          oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
                          for(i=0; i < oMoreLessSpans.length; i++){
                              oMoreLessSpans[i].curPic = 0;
                              oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
                              oMoreLessSpans[i].onclick=function(){showHideMore(this);}
                          }
                      }
                  </script>
              </head>
              <body>
                  <div>
                      <ul id="list1">
                          <li>
                              <div>
                                  <span>Show more</span>
                                  <div class="more_content">More 1 content</div>
                              </div>
                          </li>
                          <li>
                              <div>
                                  <span>Show more</span>
                                  <div class="more_content">More 2 content</div>
                              </div>
                          </li>
                          <li>
                              <div>
                                  <span>Show more</span>
                                  <div class="more_content">More 3 content</div>
                              </div>
                          </li>
                      </ul>
                  </div>
              </body>
          </html>

          Comment


          • #6
            Originally posted by jmrker View Post
            Slight modification from last post to include a bit more JS and some CSS.

            Only advantage is that click on question box shows/hides the answer
            and the box makes it easier to know where to put cursor for mouse click.

            Code:
            <!DOCTYPE HTML>
            <html>
            <head>
            <title> FAQ Display </title>
            <style type="text/css">
             .FAQ { cursor:hand; cursor:pointer;
                    border:1px solid red; width:50%; }
             .FAA { display:none; }
            </style>
            <script type="text/javascript">
            function toggle(Info) {
              var CState = document.getElementById(Info);
              CState.style.display = (CState.style.display != 'block')
                                   ? 'block' : 'none';
            }
            </script>
            </head>
            <body>
            <h2>FAQ section</h2>
            
            <DIV class="FAQ" onclick="toggle('faq1')">
             whassup?
             <div id="faq1" class="FAA">nadda</div>
            </DIV>
            
            <DIV class="FAQ" onclick="toggle('faq2')">
             whassup now?
             <div id="faq2" class="FAA">still nadda</div>
            </DIV>
            
            <DIV class="FAQ" onclick="toggle('faq3')">
             How about now?
             <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
            </DIV>
            
            </body>
            </html>
            This is probably more like that I'm looking for. Thank you very much. Just a little modifications that I have to make, and then I should be good to go.

            Comment


            • #7
              Originally posted by jmrker View Post
              Slight modification from last post to include a bit more JS and some CSS.

              Only advantage is that click on question box shows/hides the answer
              and the box makes it easier to know where to put cursor for mouse click.

              Code:
              <!DOCTYPE HTML>
              <html>
              <head>
              <title> FAQ Display </title>
              <style type="text/css">
               .FAQ { cursor:hand; cursor:pointer;
                      border:1px solid red; width:50%; }
               .FAA { display:none; }
              </style>
              <script type="text/javascript">
              function toggle(Info) {
                var CState = document.getElementById(Info);
                CState.style.display = (CState.style.display != 'block')
                                     ? 'block' : 'none';
              }
              </script>
              </head>
              <body>
              <h2>FAQ section</h2>
              
              <DIV class="FAQ" onclick="toggle('faq1')">
               whassup?
               <div id="faq1" class="FAA">nadda</div>
              </DIV>
              
              <DIV class="FAQ" onclick="toggle('faq2')">
               whassup now?
               <div id="faq2" class="FAA">still nadda</div>
              </DIV>
              
              <DIV class="FAQ" onclick="toggle('faq3')">
               How about now?
               <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
              </DIV>
              
              </body>
              </html>
              How do i add the plus and minus images to this?

              Comment


              • #8
                You should substitute you own images (and path)
                Code:
                <!DOCTYPE HTML>
                <html>
                <head>
                <title> FAQ Display </title>
                <style type="text/css">
                 .FAQ { cursor:hand; cursor:pointer;
                        border:1px solid red; width:25%; }
                 .FAA { display:none; }
                </style>
                <script type="text/javascript">
                function toggle(Info,pic) {
                  var CState = document.getElementById(Info);
                  CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
                // alert(CState.style.display+'\n'+pic.src);
                  if (CState.style.display == 'none') {
                    pic.src = "http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg";
                  } else {
                    pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
                  }
                }
                </script>
                </head>
                <body>
                <h2>FAQ section</h2>
                
                <DIV class="FAQ">
                 <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq1',this)"> 
                 whassup?
                 <div id="faq1" class="FAA">nadda</div>
                </DIV>
                
                <DIV class="FAQ">
                 <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq2',this)"> 
                 whassup now?
                 <div id="faq2" class="FAA">still nadda</div>
                </DIV>
                
                <DIV class="FAQ">
                 <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq3',this)"> 
                 How about now?
                 <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
                </DIV>
                
                </body>
                </html>

                Comment


                • #9
                  Another version with <li> tags instead of <div>
                  Modified CSS for fun.
                  Code:
                  <!DOCTYPE HTML>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <html>
                  <head>
                  <title> FAQ Display </title>
                  <style type="text/css">
                   .FAQ { cursor:hand; cursor:pointer; }
                   .FAA { display:none; }
                   #FAQlist li { list-style-type: none; }
                   #FAQlist ul { margin-left:0px; }
                  </style>
                  
                  </head>
                  <body>
                  <h2>FAQ section</h2>
                  
                  <ul id="FAQlist" style="width:33%">
                   <li class="FAQ">
                    <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq1',this)"> 
                    Whassup?
                    <div id="faq1" class="FAA">Nadda</div>
                    <hr>
                   </li>
                  
                   <li class="FAQ">
                    <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq2',this)"> 
                    Whassup now?
                    <div id="faq2" class="FAA">Still nadda</div>
                    <hr>
                   </li>
                  
                   <li class="FAQ">
                    <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq3',this)"> 
                    How about now?
                    <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
                    <hr>
                   </li>
                  
                   <li class="FAQ">
                    <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq4',this)"> 
                    ?Que pasa?
                    <div id="faq4" class="FAA">Nothing in a different language.</div>
                    <hr>
                   </li>
                  </ul>
                  
                  <script type="text/javascript">
                  function toggle(Info,pic) {
                    var CState = document.getElementById(Info);
                    CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
                    if (CState.style.display == 'none') {
                      pic.src = "http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg";
                    } else {
                      pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
                    }
                  }
                  </script>
                  </body>
                  </html>

                  Comment


                  • #10
                    This is great.

                    What do I need to add to the code to ensure the page expands when questions are clicked on - currently, the dropdowns work but the page does not expand, so the answers gradually start overlapping the footer of the page etc.

                    Also, currently you can only click on the actual + sign - how do I get it so you can click on any part of the question and the answer drops down ?

                    Thanks

                    Comment


                    • #11
                      Change the width of the UL in:
                      Code:
                      <ul id="FAQlist" style="width:33%">
                      Change where onclick event is called from <img> tag to the <li> tag
                      Code:
                       <li class="FAQ" onclick="toggle('faq1',this)">
                      Wrap you entire menu above your footer code (which you did not and have not provided).
                      Code:
                      <body>
                      <h2>FAQ section</h2>
                      <div id="wrapper">
                      
                      ...
                      
                      </ul>
                      </div>
                      More questions? Show the code you are using or provide a link to see what the problem is.

                      Something like this:
                      Code:
                      <!DOCTYPE HTML>
                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                      <html>
                      <head>
                      <title> FAQ Display </title>
                      <style type="text/css">
                       .FAQ { cursor:pointer; border-bottom:1px solid black; }
                       .FAA { display:none; }
                       #FAQlist li { list-style-type: none; }
                       #FAQlist ul { margin-left:0px; }
                      </style>
                      
                      </head>
                      <body>
                      <h2>FAQ section</h2>
                      <div id="wrapper">
                      <ul id="FAQlist" style="width:100%">
                       <li class="FAQ" onclick="toggle('faq1',this)">
                        <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
                        Whassup?
                        <div id="faq1" class="FAA">Nadda</div>
                       </li>
                      
                       <li class="FAQ" onclick="toggle('faq2',this)">
                        <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
                        Whassup now?
                        <div id="faq2" class="FAA">Still nadda</div>
                       </li>
                      
                       <li class="FAQ" onclick="toggle('faq3',this)">
                        <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
                        How about now?
                        <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
                       </li>
                      
                       <li class="FAQ" onclick="toggle('faq4',this)">
                        <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
                        ?Que pasa?
                        <div id="faq4" class="FAA">Nothing in a different language.</div>
                       </li>
                      </ul>
                      </div>
                      
                      <script type="text/javascript">
                      function toggle(Info,pic) {
                        var CState = document.getElementById(Info);
                        CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
                        if (CState.style.display == 'none') {
                          pic.src = "http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg";
                        } else {
                          pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
                        }
                      }
                      </script>
                      </body>
                      </html>

                      Comment


                      • #12
                        Thanks

                        currently you can only click on the actual + sign - how do I get it so you can click on any part of the question and the answer drops down ?

                        Comment


                        • #13
                          Originally posted by russ2204 View Post
                          Thanks

                          currently you can only click on the actual + sign - how do I get it so you can click on any part of the question and the answer drops down ?
                          Works fine for me in FF.
                          Will test later in MSIE.

                          What browser are you using?

                          Comment


                          • #14
                            The drop down list works fine - it's just that rather than clicking the plus button I want to be able to select any part of the question.

                            Comment


                            • #15
                              Originally posted by russ2204 View Post
                              The drop down list works fine - it's just that rather than clicking the plus button I want to be able to select any part of the question.
                              Sorry, but I don't understand the problem.
                              What do you mean by "any part of the question"?
                              When I click on the plus or the sentence (either one), it does display the response.
                              When I click on either the '+' or the sentence again, the response goes away as expected.

                              Can you give an example (verbal or graphics) of the problem you are having?
                              Also show the version of the script you are currently using that is giving you fits.

                              Comment

                              Working...
                              X