Ride around jQuery

Question

OK, I am designing a site and thought that I would stick with some jQuery, since I really need js to test.

The page with my problem is here: http://new.focalpix.co.uk/moreinfo.php

JS:

$(document).ready(function(){

    $(".answer").css("display","none");

    $("#maincontent a.animate").click(function() {
        $("#maincontent .answer").slideUp('slow');
        var id = $(this).attr('href');
        $(id).slideDown('slow');
        return false;
    });

});

This works fine, but if you click on the link where the answer has already slipped, then it will move up and then go down again.

I'm not sure of the purest way to stop this - any ideas?

Answer 1

First, I would suggest the following structure for your faq:

<div id="faq">
  <div class="qa" id="faq_greenandflies">
    <span class="q">What is <a href="#faq_greenandflies">green and flies</a></span>
    <div class="a">
      Super Pickle!
    </div>
  </div>
  <div class="qa" id="faq_redandbadforteeth">
    <span class="q">What is <a href="#faq_redandbadforteeth">Red and bad for your teeth</a></span>
    <div class="a">
      a Brick
    </div>
  </div>
  <!--
  More FAQ here

  -->
</div>

and then define your jQuery as follows:

 <script type="text/javascript">
    $(function(){
  // hide all answers
  $('div#faq .qa .a').hide();

      // bind a click event to all questions
  $('div#faq .qa .q a').bind(
        'click',
        function(e){
          // roll up all of the other answers (See Ex.1)
          $(this).parents('.qa').siblings().children('.a').slideUp();
          // reveal this answer (See Ex.2)
          $(this).parents('.qa').children('.a').slideDown();
          // return true to keep any other click events       
          return true;
        });

      // check location.hash to see if we need to expand one (direct link)
      $(location.hash).find('.q a').click();
    });
</script>

Explanation:

(ex .1)

• This is the link that was clicked.
• , , "qa" (, , )
• . ( qa jQ)

(Ex.2)

• ,
• , , "qa" (, , )

A .

:

• ,
• , .
• divs, .

Answer 2

. slideToggle().

$(document).ready(function() {
    $(".answer").css("display","none");
    $("#maincontent a.animate").click(function() {
        $("#maincontent .answer").slideToggle('slow');
    });
});

Answer 3

slideToggle(), Soviut, - CSS javascript. jQuery , .

$(".answer").hide();

Instead of setting CSS display properties. Just thought I'd let you know.

Answer 4

try using one method, for example:

 $(selector).one('effect', 'data for effect', callback function);

it ensures that the effect occurs only once for each element.