title: One switch for multiple expand/collapse actions
body: <p>Sorry to bother you but i'm stuck with this one.
  I'm trying to make a button that will function as a switch and when you press it, it needs to collapse and expand different divs simultaneously.</p>
  
  <p>I want one div to be hidden and another div already shown. When you hit the switch the shown div will be hidden and the hidden div will be shown and etc.. everytime you hit the button.</p>
  
  <p>I tried to experiment some with jQuery but all without any luck because i'm not that skilled unfortunately. I had the idea to let jQuery search for every div in #main that's called 'collapse'. But it only picks up the first collapse div and ignores other 'collapse' divs within the parent (#main) div.</p>
  
  <p>PS: I use h4.expand for the switch and trigger the event.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>;(function($) {
  $.fn.toggler = function(options) {
      var o = $.extend({}, $.fn.toggler.defaults, options);
  
      var $this = $(this);
      $this.wrapInner('&lt;a style="display:block" href="#" title="Expand/Collapse" /&gt;');
  
      return this.each(function() {
        var container;
        container = '#main';
        if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); } 
  
        $(this).click(function() {
          $(this).find('a').toggleClass('open').end().next('div.collapse')[o.method](o.speed);
          return false;
      });
  });};
  $.fn.toggler.defaults = {
       speed : 'slow'
  };
  
  var msie = false;
  if(typeof window.attachEvent != 'undefined') { msie = true; }
  
  $.fn.slideFadeToggle = function(speed, easing, callback) {
      return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() { 
      if (msie) { this.style.removeAttribute('filter'); }
      if (jQuery.isFunction(callback)) { callback(); }
    }); 
  };
  })(jQuery);
  </code></pre>