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

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”.