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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    May 2010
    Location
    Saint Louis, MO
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question 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
    New Coder
    Join Date
    May 2010
    Location
    Saint Louis, MO
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote 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

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    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; 08-27-2011 at 11:26 PM.

  • Users who have thanked DaveyErwin for this post:

    Squishy435 (08-28-2011)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    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>

  • Users who have thanked jmrker for this post:

    Squishy435 (08-28-2011)

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote 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>

  • Users who have thanked webdev1958 for this post:

    Squishy435 (08-28-2011)

  • #6
    New Coder
    Join Date
    May 2010
    Location
    Saint Louis, MO
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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?

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    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>

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    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>

  • #10
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    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>

  • #12
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ?

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote 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?

  • #14
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote 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.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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