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 2 of 2 FirstFirst 12
Results 16 to 23 of 23
  1. #16
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello and thanks for this - really useful! I'd like to remove the lines dividing the FAQs but can't see where they feature in the code - could you point me in the right direction please?

  2. #17
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    remove the border style ...

    Code:
    .FAQ { cursor:pointer; border-bottom:1px solid black; }

  3. #18
    New to the CF scene
    Join Date
    Oct 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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; cursorointer; }
    .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" onclick="toggle('faq1',this)">
    <img src="images/plus.png">
    Whassup?
    <div id="faq1" class="FAA">Nadda</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 = "images/plus.png";
    } else {
    pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
    }
    }
    </script>
    </body>
    </html>
    </code>

    I just found this discussion while needing a solution for an interactive Q & A list myself. I'm trying to make use of the unordered list approach provided by jmrker (Thank you very much, BTW), and have made a few simple changes (reflected in the code above and noted below), but these changes appear to have broken the javascript that toggles the plus/minus image.

    Modifications I have made:
    1. I replaced the broken "plus.jpg" link with a local image "image/plus.png" (which will still not resolve when you try it). When testing after making this change the javascript toggle still worked.
    2. I moved the "onclick" argument from the "img" tag to the "li" tag to make a larger click target out of the text instead of just the image. Upon making this change, the "plus" image no longer changes to "minus" when the click activates the drop down answer. How do I fix this?

  4. #19
    New to the CF scene
    Join Date
    Oct 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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" onclick="toggle('faq1',this)">
      <img src="images/plus.png"> 
      Whassup?
      <div id="faq1" class="FAA">Nadda</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 = "images/plus.png";
      } else {
        pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
      }
    }
    </script>
    </body>
    </html>
    I just found this discussion while needing a solution for an interactive Q & A list myself. I'm trying to make use of the unordered list approach provided by jmrker (Thank you very much, BTW), and have made a few simple changes (reflected in the code above and noted below), but these changes appear to have broken the javascript that toggles the plus/minus image.

    Modifications I have made:
    1. I replaced the broken "plus.jpg" link with a local image "image/plus.png" (which will still not resolve when you try it). When testing after making this change the javascript toggle still worked.
    2. I moved the "onclick" argument from the "img" tag to the "li" tag to make a larger click target out of the text instead of just the image. Upon making this change, the "plus" image no longer changes to "minus" when the click activates the drop down answer. How do I fix this?

  5. #20
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb

    I don't know if you have the "plus.jpg" in a subdirectory under the placement of your source code (images/filename.png),
    but it does not seem to be in the same place as your "remove-minus-sign.png" image in the photobucket site.

    My original post used the photobucket images provided by the original OP, but they seem to have been moved or deleted.

    So, to avoid using any images (+ or - .jpg or .png), I modified the code to use just normal ASCII characters of + and -
    with some additional CSS modifications to make them bigger and bolder.

    Now you can click anywhere within the horizontal lines and the section will expand and compress with the proper + or - symbol.
    And you don't need to wait for the images to load (although these images, in particular, have only a small band-width).

    PHP Code:
    <!DOCTYPE HTML>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    html>
    <
    head>
    <
    titleFAQ Display </title>
    <
    style type="text/css">
     .
    FAQ cursor:pointerborder-bottom:1px solid black; }
     .
    FAA display:none; }
     
    #FAQlist li { list-style-type: none; }
     #FAQlist ul { margin-left:0px; }
     
    .MoreLess font-size:3emfont-weight:boldcolor:red; }
    </
    style>

    </
    head>
    <
    body>
    <
    h2>FAQ section</h2>
    <
    div id="wrapper">
    <
    ul id="FAQlist" style="width:100%">
     <
    li class="FAQ" onclick="toggle('faq1',this)">
      <
    span id="faq1Char" class='MoreLess'>+</spanWhassup?
      <
    div id="faq1" class="FAA">Nadda</div>
     </
    li>

     <
    li class="FAQ" onclick="toggle('faq2',this)">
      <
    span id="faq2Char" class='MoreLess'>+</spanWhassup now?
      <
    div id="faq2" class="FAA">Still nadda</div>
     </
    li>

     <
    li class="FAQ" onclick="toggle('faq3',this)">
      <
    span id="faq3Char" class='MoreLess'>+</spanHow 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)">
      <
    span id="faq4Char" class='MoreLess'>+</span> ?Que pasa?
      <
    div id="faq4" class="FAA">Nothing in a different language.</div>
     </
    li>
    </
    ul>
    </
    div>

    <
    script type="text/javascript">
    // Modified from: http://codingforums.com/javascript-programming/236311-faq-drop-down-when-q-clicked-2.html

    function toggle(Info,pic) {
      var 
    CState document.getElementById(Info);
      
    CState.style.display = (CState.style.display != 'block') ? 'block' 'none';
      if (
    CState.style.display == 'none') { document.getElementById(Info+'Char').innerHTML '+'; }
      else { 
    document.getElementById(Info+'Char').innerHTML '-'; }
    }
    </script>
    </body>
    </html> 
    Note also that the onclick event was never in the image. It is in the <li> sections.

  6. #21
    New to the CF scene
    Join Date
    Oct 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice. That will work great for my application. Thanks for the quick reply. Someday I'll have to learn some of that magic that is Javascript.

  7. #22
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts
    Quote Originally Posted by GrumpyPig View Post
    Nice. That will work great for my application. Thanks for the quick reply. Someday I'll have to learn some of that magic that is Javascript.
    You're most welcome.
    Happy to help.
    Good Luck!

  8. #23
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts
    I looked at my posting again and decided I did not like the implementation.
    It did not allow me to put in any other links/buttons and such in the hidden sections without hiding the entire section again.
    I also removed the dependency on the LI and DIV tags in favor of the DT and DD tags. Looks a bit cleaner to code to me.

    Here is a modification you can consider that shows an anchor tag in the 3rd FAQ/FAA display.
    It also allows the use of the TAB and Shift-TAB key to move between the selections and use the ENTER key to toggle the displays.

    PHP Code:
    <!DOCTYPE HTML>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    html>
    <
    head>
    <
    titleFAQ Display </title>
    <
    style type="text/css">
     .
    FAQ cursor:pointer; }
     .
    FAA display:noneborder-bottom:medium solid red; }
     .
    MoreLess font-size:3emfont-weight:boldcolor:red; }
    </
    style>

    </
    head>
    <
    body>
    <
    h2>FAQ section</h2>

    <
    dl id="FAQlist" style="width:50%">

     <
    dt class="FAQ" onclick="toggle('faq1')" onkeypress="checkEnter(event,'faq1')" tabindex="1">
       <
    span id="faq1Char" class='MoreLess'>+</spanWhassup?
     </
    dt>
     <
    dd id="faq1" class="FAA">Nadda</dd>

     <
    dt class="FAQ" onclick="toggle('faq2')" onkeypress="checkEnter(event,'faq2')" tabindex="2">
       <
    span id="faq2Char" class='MoreLess'>+</spanWhassup now?
     </
    dt>
     <
    dd id="faq2" class="FAA">Still nadda</dd>

     <
    dt class="FAQ" onclick="toggle('faq3')" onkeypress="checkEnter(event,'faq3')" tabindex="3">
       <
    span id="faq3Char" class='MoreLess'>+</spanHow about now?
     </
    dt>
     <
    dd id="faq3" class="FAA">How many times must I say
       
    <b><a href="http://www.google.com/">nothing</a></b>?</dd>

     <
    dt class="FAQ" onclick="toggle('faq4')" onkeypress="checkEnter(event,'faq4')" tabindex="4">
       <
    span id="faq4Char" class='MoreLess'>+</span> ?Que pasa?
     </
    dt>
     <
    dd id="faq4" class="FAA">Nothing in a different language.</dd>

    </
    dl>

    <
    script type="text/javascript">
    // Modified from: http://codingforums.com/javascript-programming/236311-faq-drop-down-when-q-clicked-2.html
    // Modified again for ability to link somewhere in answer section of FAQ
    // and added TAB and ENTER to show/hide FAA sections

    function toggle(Info) {
      var 
    CState document.getElementById(Info);
      
    CState.style.display = (CState.style.display != 'block') ? 'block' 'none';
      if (
    CState.style.display == 'none') { document.getElementById(Info+'Char').innerHTML '+'; }
      else { 
    document.getElementById(Info+'Char').innerHTML '-'; }
    }

    // Following from: http://stackoverflow.com/questions/12788554/onkeypress-enter-event-not-firing
    function checkEnter(evt,IDS) {  if (evt.keyCode === 13) {  toggle(IDS); } } // Handle key press event here

    </script>
    </body>
    </html> 


 
Page 2 of 2 FirstFirst 12

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
  •