www.webdeveloper.com
Results 1 to 6 of 6

Thread: jQuery show/hide help

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    67

    jQuery show/hide help

    I have a question regarding jQuery show/hide.

    At the moment, my page opens and my FAQs have all the answers showing. When I click on any of the questions, all the answers hide.

    What adjustments can I make that will have my page open to only showing the questions (this is my FAQ page) and when a visitor clicks on a question, only that answer shows? Right now all answers show when I click a question.

    thank you for the help,
    Randy

    My jquery code is this:

    Code:
    $(document).ready(function () {
        $('h3').click(function() {
       if ( $('li p.faqs_answers').is(':visible')){
            $('li p.faqs_answers').hide(1000);
        }else {
          $('li p.faqs_answers').show(1000);
        }
    });
    });
    And a bit of my html code is this:

    Code:
    <div id="faqscontactaboutservices">
    
    	<h3 class="faqs_specific">Frequently Asked Questions</h3>
    <ul>
    	<li>
    		<div class="faqs_specific"><h3>&nbsp;What areas do you serve?</h3></div>
    			<p class="faqs_answers">answer goes here</p>
    	</li>
    	<li>
    		<div class="faqs_specific"><h3>&nbsp;What forms of payment do you accept?</h3></div>
    		<p class="faqs_answers">We accept cash, check, debit card, and credit card.</p>
    	</li>
    
            ...

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You should give each answer section a different CSS id so you can determine which DIVs to reveal or hide.

  3. #3
    Join Date
    Mar 2011
    Posts
    67
    Thanks, however, I wasn't successful. Does anyone have an explicit example? thanks.

  4. #4
    Join Date
    Jan 2007
    Posts
    110
    Right off my head, you are asking JQ to response to all h3 elements!
    $(document).ready(function () {
    $('h3').click(function() {
    if ( $('li p.faqs_answers').is(':visible')){
    $('li p.faqs_answers').hide(1000);
    }else {
    $('li p.faqs_answers').show(1000);
    }
    });
    });

    Incidentally, I was recently asked to fix a website, the website has a lot of large images, the initial load took forever, the original developer made the same mistake, he did a preload of all images with $('img'), so all 200 or so images were loading when the page starts!!!!! It took >40sec to just for the front page to show up!!!!! :0
    Last edited by MacPC; 01-11-2013 at 07:45 PM.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <style type="text/css">
    div.faqs_specific h3{cursor:pointer;}
    p.faqs_answers{display:none;}
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    $('div[class="faqs_specific"]').click(function(){
    var par=$(this).next();
    /*this one is for hiding any previous answer which may be still visible*/
    $('p[class="faqs_answers"]').each(function(){if($(this)!==par){$(this).hide(100);}});
    if(par.is(':visible')){par.hide(200);}
    else{par.show(300);}
    });
    });
    </script>
    </head>
    <body>
    <div id="faqscontactaboutservices">
    <h3 class="faqs_specific">Frequently Asked Questions</h3>
    <ul>
    <li><div class="faqs_specific"><h3>&nbsp;What areas do you serve?</h3></div>
    <p class="faqs_answers">answer goes here</p>
    </li>
    <li>
    <div class="faqs_specific"><h3>&nbsp;What forms of payment do you accept?</h3></div>
    <p class="faqs_answers">We accept cash, check, debit card, and credit card.</p>
    </li>
    </ul>	
    </div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Sep 2007
    Posts
    301
    Code:
      
    <html>
    <head>
    <title> Untitled </title>
    <style type="text/css">
      .active {color:red;};
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    // http://api.jquery.com/toggleClass/
    // http://www.akifkaraagac.com/addclass-removeclass-toggleclass-jquery-css-isemleri/
    
    $(document).ready(function(){
        $(".hidden").hide();
        $("h2.trigger").click(function(){
    
    $(".hidden").hide();
      
           $(this).next(".hidden").slideToggle("slow,");
        });
    });
     </script>
    
    </head>
    <body>
    <h2 class="trigger">The Time Through Ages</h2>
    <div class="hidden">
    In the Name of Allah, Most Gracious, Most Merciful
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy. 
    </div>
    <h2 class="trigger">The Opening</h2>
    <div class="hidden">
    1. In the name of Allah, Most Gracious, Most Merciful.
    
    2. Praise be to Allah, the Cherisher and Sustainer of the worlds;
    
    3. Most Gracious, Most Merciful;
    
    4. Master of the Day of Judgment.
    
    5. Thee do we worship, and Thine aid we seek.
    
    6. Show us the straight way,
    
    7. The way of those on whom Thou hast bestowed Thy Grace, those whose (portion) is not wrath, and who go not astray.
    
    </div>
    </body>
    </html>
    Last edited by Ayşe; 01-11-2013 at 06:09 PM.
    İyiliği emret. Kötülükten alıkoy. (31/16)

    hasbunallahuVeNimelVekil++

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