1 Replies - 542 Views - Last Post: 05 August 2014 - 11:08 AM

#1 Quang Pham  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 74
  • Joined: 18-November 12

How to use different methods on a FAQ application

Posted 04 August 2014 - 05:00 PM

Dear Fellow Programmers:
I have a FAQ application and I would like to use different methods on it: toggle(), show(), hide(), hover(), click, and bind() methods on it. Could you look and tell me how I might place these methods on the jQuery/javascript page so that when one hovers over the <h2> elements, the definitions show up? I would greatly appreciate any help on this problem.
Yours truly,
Quang Pham
<section id="faqs">
        <h1>jQuery FAQs</h1>
           
        <h2>What is jQuery?</h2>
       <!-- The jQuery-->
        <script>
        $(document).ready(function() {
             $("#faqs h2").toggle(
                  function() {
                       $(this).addClass("minus");
                       $(this).next().show();
                  },
                  function() {
                       $(this).removeClass("minus");
                       $(this).next().hide();
                  }
             );  //end toggle
        });  //end ready                 
         </script>
        <!--end the jQuery-->
        <div>
            <p>
                jQuery is a library of the Javascript functions that you're most likely to need as you develop web sites.
            </p>
             
        </div>
        <h2>Why is jQuery becoming so popular?</h2>
        <div>
            <p>Three reasons:</p>
            <ul>
                <li>It's free.</li>
                <li>It lets you get more done in less time.</li>
                <li>All of its functions cross- browser compatible.</li>
            </ul>
        </div>
        <h2>Which is harder to learn:  jQuery or Javascript?</h2>
        <div>
            <p>For most functions, jQuery is significantly easier to learn and use than
               Javascript.  But remember that jQuery is Javascript.</p>
        </div>
    </section>
</body>

    
</html>
    


Is This A Good Question/Topic? 0
  • +

Replies To: How to use different methods on a FAQ application

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4421
  • View blog
  • Posts: 12,286
  • Joined: 18-April 07

Re: How to use different methods on a FAQ application

Posted 05 August 2014 - 11:08 AM

Well if you attach a class to each of your answer divs, you will have something that you can more easily lock onto for your jQuery. To avoid some quirks too you might want to manually set your margins and padding on some of the elements. I have taken your example and thrown it onto jFiddle for you to play with. I have made adjustments to it so you can see how this works. I added slidetoggling to it for some nice effects.

http://jsfiddle.net/2ejdL/

Enjoy! :)
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1