jQuery toggle script

I have been working on a toggle script, but I find myself repeating my code. Is there a way of combining it all?


jQuery(document).ready(function($) {
var topContainer = $("#alles");
var topButton = $(".abutton");
topButton.click(function() {
topContainer.slideToggle(1200, 'easeInOutQuart');
$(".hideable").slideToggle(1200, 'easeInOutQuart');
});

var topContainer2 = $("#voorbeelden");
var topButton2 = $(".bbutton");
topButton2.click(function() {
topContainer2.slideToggle(1200, 'easeInOutQuart');
$(".hideable").slideToggle(1200, 'easeInOutQuart');
});

var topContainer3 = $("#contact");
var topButton3 = $(".cbutton");
topButton3.click(function() {
topContainer3.slideToggle(1200, 'easeInOutQuart');
$(".hideable").slideToggle(1200, 'easeInOutQuart');
});
});
.container {
display:block;
width:500px;
margin:0 auto;
}

.hideable {
width: 500px;
margin: 0 auto;
}

#alles {
float:left;
width:500px;
height:500px;
background:#ff4000;
}

#voorbeelden {
float:left;
width:500px;
height:100px;
border-top:1px solid #ddd;
background:#cc6600;
}

#contact {
float:left;
width:500px;
height:100px;
border-top:1px solid #ddd;
background:#bb3300;
}

.toggleable {
display:none;
}



stuff
more stuff










-

a
stuff



-


b
stuff



-

c
stuff






You can either write a method that is bound to the global scope and takes two arguments, the onClick element and the slideToggle element, and does just what you want (without writing redundant code).

function bindToggleTwo(cElem, tElem) {
   $(cElem).click(function() {
      $(tElem).slideToggle(1200, 'easeInOutQuart');
      $(".hideable").slideToggle(1200, 'easeInOutQuart');
   });
}

jQuery(document).ready(function($) {
    bindToggleTwo("#alles", ".abutton");
    bindToggleTwo("#voorbeelden", ".bbutton");
    bindToggleTwo("#contact", ".cbutton");
});

Alternatively, you could write a jQuery function that is called on a jQuery object to do the very same. Basically this is a function that expects to be scoped such that this is a jQuery object. Anyway, both of these methods work, and will simplify your code. :)

jQuery.fn.bindToggleTwo = function(tElem) {
  $(this[0]).click(function() {
     $(tElem).slideToggle(1200, 'easeInOutQuart');
     $(".hideable").slideToggle(1200, 'easeInOutQuart');
  });
}

jQuery(document).ready(function($) {
    $("#alles").bindToggleTwo(".abutton");
    $("#voorbeelden").bindToggleTwo(".bbutton");
    $("#contact").bindToggleTwo(".cbutton");
});

StackExchange Code Review Q#31367, answer score: 3