jQuery: How can I reproduce the slide-out effect of the Accordion, without jQuery UI?

Question

I'm just learning jQuery, figuring out what's possible, finding my way around.

I'd like to have a div "slide out" like an accordion, but I don't want to pay the cost of the jQuery UI download, and also I want to allow multiple divs to be open at the same time.

How does it work? How is the slide-out effect of the accordion done, inside jquery.ui.accordion.js? Is there a call I can make to .animate() to move a div from display:none to display:block ? (I read that animate works only with numeric properties.)

Answer 1

You can use slideDown and slideUp if you are creating a vertical accordion, otherwise, you will need to combine a bit more CSS to allow for use of animate on the positioning of some divs.

Answer 2

Just FYI, the minified slide effect in jQueryUI and core would be only a 5.5KB hit on the first request. There'd be no need for the entire jQueryUI library. Files you'd need - ui.slider.min.js and ui.core.min.js

Answer 3

You can do this for one element.

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}

Using slideToggle

http://docs.jquery.com/Effects/slideToggle

But if you want to do multiple levels, you will need to also add a function to go through all items and Slide them up or hide them before the slidetoggle fires if you only want one item open at a time. This is where jquery accordion can help. They have wired in many options like this.

Answer 4

I'm learning all sorts of things. I used jQuery only - no UI, no UI Accordion, no UI Effects - and got the slide-down effect that I wanted. Not sure of the terminology for this visual effect. (I think that is half the challenge with jQuery - what do I call the various effects). I think maybe some people call this "toggle blinds".

Click this to see the effect: http://jsbin.com/ogape

Here's the html fragment

<div id="div0">
   <p id="intro"><a href="#" class='expander'>+</a> Introduction</p>

   <div class='indented' style='display:none'>
     <p >
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer
       vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus,
       sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam.
     </p>

     <p> Quisque pharetra lacus quis sapien. Duis
       id est non wisi sagittis adipiscing. Nulla facilisi. Etiam quam erat,
       lobortis eu, facilisis nec, blandit hendrerit, metus. Fusce
       hendrerit. Nunc magna libero, sollicitudin non, vulputate non, ornare
       id, nulla.  Suspendisse potenti. Nullam in mauris.
     </p>
   </div>
 </div>

This is the jQuery code:

  var slideOut = function(element){
      var parent = $(element).parent().parent(); // outer div
      var dList = parent.children("div");  // inner div, all siblings of the <a>
      dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow');
  };

  $(document).ready(function() {
      $('div p a[href="#"]').click(function() { slideOut(this); });
  });

That slideOut() function is slightly simplified from what it actually does. It also swaps the + and - for the expander button in the actual code, which makes it a little more complicated:

  var slideOut = function(element){
      var parent = $(element).parent().parent(); // outer div
      var dList = parent.children("div");  // inner div, all siblings of the <a>
      dList.animate({opacity: 'toggle', height: 'toggle'}, 'slow');

      // swap characters on the expander "button"
      var o = dList.css("opacity"); 
      // dash is narrower than +, so we must compensate
      if (o==1) {
          $(element).html("+")
              .css("padding-left", "1px")
              .css("padding-right", "1px");
      } else {
          $(element).html("-")
              .css("padding-left", "3px")
              .css("padding-right", "3px");
      }
  };

You can see the full html/js code at the live demo link referenced above.

The key thing that I did not know, is that one can animate the height by calling animate with "toggle".