ansaurus

Question

Is there a better way to write this jQuery script?

Answer 1

+9 A:

something like

$(document).ready(function(){
    $('.question div').hide();
    $('.question p').click(function(){
        $(this).next('div').slideToggle("slow");
        $(this).addClass('down');
    });
});

you could also modify your markup some and use the jquery ui accordion:

http://docs.jquery.com/UI/Accordion

John Boker 2010-01-22 14:50:58

Answer 2

+12 A:

Use this instead of any of the jQuery you posted:

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .children('p').click(function(){
      $(this).toggleClass('down').next().slideToggle("slow");
    });
});

Also, you really should consolidate your classes. I would use this updated HTML pattern for all your questions:

<div class="question">
  <p class="button">&nbsp;<a href="#">Myth No. 2:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas. &nbsp;</a></p>
  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum purus porta urna aliquet consectetur. Maecenas tempus tellus sed augue tincidunt molestie fermentum lorem porttitor. Nam tincidunt elit vitae quam. <br/><br/> 
  <a href="http://stackoverflow.com/questions/ask" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing. </a>
  </div>
</div>

Your CSS would follow this form:

.question       { }
.button         { } /* Instead of bbOne, bbTwo, etc*/
.question div   { } /* Instead of divOne, divTwo, etc */
.question div a { } /* Instead of wwwLink */

And then I would use this slightly updated jQuery:

$(document).ready(function() {
  $('div.question')
    .children('div').hide().end()
    .find('p > a').click(function(e){
      $(this)
        .parent().toggleClass('down')
        .next().slideToggle("slow");
      e.preventDefault();
    });
});

Doug Neiner 2010-01-22 14:52:47

+1 very nice and effective

Juraj Blahunka 2010-01-22 14:56:48

I need to brush up on the CSS more!

tahdhaze09 2010-01-22 15:36:39

This worked great! Thank you, Doug. Thanks to everyone that answered!

tahdhaze09 2010-01-22 16:26:43

Answer 3

+1 A:

Give your DIVs a common class and use id's for identification, i.e. instead of all the ids on everything, just have one id on the top-level div, and then generic class names on child Ids. Also avoid using   and <br/> tags, but do it with CSS padding/margins instead. Something along these lines:

<div class="question" id="question1">
   <div class="questionText">
      <p class="questionButton"></span>
      <a href="#">Myth No. 1: ...</a>
   </div>
   <div class="questionAnswer">
       ...
   </div>
</div>

This will also simplify your CSS. Just use the common class names instead of enumerating all the questions.

In general you just need to use jQuery on the class names and it will attach itself to all your elements. Also in a jQuery click handler you rarely need to use the ids of elements, you can use $(this) to get the current element and then use traversing functions to get associated elements. Like this:

   $(document).ready(function() {
       $(".questionAnswer").hide();

       $(".questionButton").click(function(){
           $(this).parent().find(".questionAnswer").slideToggle("slow");
           $(this).toggleClass("down");
       });
   });

Fred

fredw 2010-01-22 15:08:54

ansaurus

tags:

views:

answers:

Is there a better way to write this jQuery script?

related questions