CODEWITHSUNDEEP
javascript
tyeldham
tyeldham

Reputation: 15

Streamlining repeated javascript

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.

Upvotes: 0

Views: 71

Answers (4)

Guffa
Guffa

Reputation: 700232

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.

Upvotes: 0

Marlin
Marlin

Reputation: 749

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;
});

Upvotes: 0

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

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.

Upvotes: 0

SLaks
SLaks

Reputation: 887315

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;
});

Upvotes: 1

Related Questions