Streamlining repeated javascript

Question

I'm new to this, 1 week of work experience in, so I apologise if there is a screamingly obvious solution to this problem. I had a quick look at similarly titled posts but couldn't find anything I could use.

I've been working on a form that has collapsable sections so that when the user has completed one section, they can click a sectionbar and it will collapse that division while the rest of the form stays open. I have achieved this fine using the following code

  $('#options').click(function() {
     $('div.options').toggle('slow');
     return false;
  });
     $('#options2').click(function() {
     $('div.options').toggle('slow');
     return false;
   });   
   $('#clientdetails').click(function() {
    $('div.clientdetails').slideToggle('100');
    return false;
  });
     $('#clientaddress').click(function() {
    $('div.clientaddress').slideToggle('100');
    return false;
  });
     $('#groupoptions').click(function() {
    $('div.groupoptions').slideToggle('100');
    return false;
  });
  $('#bookingoptions').click(function() {
    $('div.bookingoptions').slideToggle('100');
    return false;
  });
  $('#dataexchangeoption').click(function() {
     $('div.dataexchangeoption').slideToggle('100');
     return false;
  });
  $('#invoice').click(function() {
     $('div.invoice').slideToggle('100');
     return false;
  });   
    $('#contacts').click(function() {
     $('div.contacts').slideToggle('100');
     return false;
  });  
  $('#notes').click(function() {
     $('div.notes').slideToggle('100');
     return false;
  });
    $('#tasks').click(function() {
     $('div.tasks').slideToggle('100');
     return false;
  });

Then the parts of each section is simply marked with id or class tags for their respective division. However obviously this is a hell of a lot of commands which are essentially the same thing with some tags swapped. Is there a way of compiling all of these into 1 function that will still enable me to allow distinct divisions to collapse? Any help would be greatfully recieved and appologies again if it's really obvious.

What does your markup look like? Odds are, we'll be able to help you find simplified selectors that will get this down to a single statement. — ajm
– ajm, Commented Sep 13, 2011 at 13:52

SLaks · Accepted Answer · 2011-09-13 13:53:34Z

1

Replace the ID's with rel attributes, and add a separate class for the togglers:

<a rel="options" class="toggler">Options</a>

You can then write

$('.toggler').click(function() {
    $('div.' + $(this).attr('rel')).slideToggle('100');
    return false;
});

answered Sep 13, 2011 at 13:53

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tyeldham Over a year ago

Thanks for all the really quick replies guys. I'm gonna use the one that I can currently just replace into my code for the moment, but I will definitely look into streamlining the markup and using the other method that has been suggested in the future.

Guffa · Accepted Answer · 2011-09-13 14:10:24Z

0

You can use the , operator in a selector to match more than one id:

$('#options,#options2').click(function() {
  $('div.options').toggle('slow');
  return false;
});

(Note: Clicking either element toggles the same div. I don't know if that is intentional, but that is what the original code does.)

You can use the id of the clicked element to make the selector for the element to toggle:

$('#clientdetails,#clientaddress,#groupoptions,#bookingoptions,#dataexchangeoption,#invoice,#contacts,#notes,#tasks').click(function() {
  $('div.' + this.id).slideToggle('100');
  return false;
});

These work as drop-in replacements for your code, without any need to change the markup. The code may benefit from changes in the markup, but that is a different matter.

edited Sep 13, 2011 at 14:10

answered Sep 13, 2011 at 14:05

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

tyeldham Over a year ago

Yes that's intentional, the 2nd one is for a close button that appears in a the pop out and the original button also closes it. Thanks =)

Andreas Eriksson · Accepted Answer · 2011-09-13 13:59:24Z

0

Well, you could add a class for the selected effect, then write some handlers for clicks on elements with those classes.

Also, say you add a name to the anchor tags to link them to what they should perform the toggle on.

  $('.optionsbutton').click(function() {
     $('div.options').toggle('slow');
     return false;
  });
  $('.slidetoggle').click(function() {
     $("#" + $(this).attr('name')).slideToggle('100');
     return false;
  });

Here's a little JSFiddle i made to illustrate: http://jsfiddle.net/Hy8kW/2/

Have a nice day, and good luck.

edited Sep 13, 2011 at 13:59

answered Sep 13, 2011 at 13:53

Andreas Eriksson

9,0278 gold badges52 silver badges66 bronze badges

Comments

Marlin · Accepted Answer · 2011-09-13 14:00:40Z

0

Your solution is to give all collapsible sections a general class name then give that class a toggle() referenced using "this"

$('.collapse').click(function(){
   $(this).toggle('slow);
   return false;
});

since its a toggle() function i imagine you want a means of bringing it back, if that's the case you can use 'this' and traverse down the DOM tree

$('.collapse').click(function(){
   $(this).children('.hideThis').toggle('slow);
   return false;
});

answered Sep 13, 2011 at 14:00

Marlin

7494 silver badges8 bronze badges

Collectives™ on Stack Overflow

Streamlining repeated javascript

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related