possible to cut this down to be less code?

Question

I want to know if I can break this down to be less code.

I am setting slidetoggle to 4 different parts of the page, each div has its own id.

I hope it can be slimmed down to a few lines of code, since each div has the same slideToggle speed of 200.

Here is the code:

$(document).ready(function() {
  $('#our-future-intro-slide').click(function() {
    //$(".our-future-intro").delay(2400).slideDown(3600);
    $(".our-future-intro").slideToggle(200);
  });
  $('#strategic-planning-click').click(function() {
    $("#strategic-planning").slideToggle(200);
  });
  $('#student-learning-click').click(function() {
    $("#student-learning").slideToggle(200);
  });
  $('#institutional-assessment-click').click(function() {
    $("#institutional-assessment").slideToggle(200);
  });
});

Answer 1

You can put more than one ID in a selector, separated by commas. Then just remove the -click or -slide from the ID of the element that was clicked.

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    var id = this.id.replace(/-click|-slide/, '');
    $("#" + id).slideToggle(200);
  });
});

---

EDIT:

As @Ben Blank noted, .our-future-intro is a class, not an ID. If you can't use an ID, then the above code could be modified as follows:

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    var selector = this.id.replace(/^(.+)(-click|-slide)$/, function(str,p1,p2) { return (p2 == '-click') ? '#' + p1 : '.' + p1; })
    $(selector).slideToggle(200);
  });
});

---

EDIT:

Based on the code sample you provided, another alternative would be this:

Please note that it relies on your HTML structure staying consistent as provided.

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    $(this).parent().next().slideToggle(200);
  });
});

• http://api.jquery.com/parent/
• http://api.jquery.com/next/

Answer 2

One way would be to put all the objects in an array and loop through binding since you use the same code:

var objects = [ "our-future-intro", "strategic-planning", "student-learning", "institutional-assessment" ];

$.each(objects, function()
{
     $('#' + this + '-click').click(function() {
$("#" +  this).slideToggle(200);

}) });

Answer 3

I would rely on the HTML structure to assign all clicks and sliding behavior. As long as that convention holds, extending this is simply a matter of adding more HTML.

$("h1, h3").each(function(i, heading) {
    $('a', this).click(function() {
        heading.next('div').slideToggle(200);
    });
});

Assuming the content structure is like (based on your pastie):

<div>
    <h1><a href="..">one</a></h1>
    <div>content for one</div>

    <div>
        <h3><a href="..">two</a></h3>
        <div>content for two</div>
    </div>

    <div>
        <h3><a href="..">three</a></h3>
        <div>content for three</div>
    </div>

    ...
</div>