What's a Jelo Shot? How do I use these tutorials?

Tutorial: Easy Collapsible Panels with JavaScript

<!-- this is the markup used in the examples on this page -->
<div class="example">
    <h1>Collapsible Panel</h1>
    <p>...</p>
</div>

<!-- and the related CSS -->
<style>
    .example {
        border: 1px solid blue;
        overflow: hidden;
        width: 400px;
    }
    .example h1 {
        background: blue;
        color: white;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
    }
    .example p {
        padding: 10px;
    }
<style>

Making a collapsible DIV

var maxHeight = Jelo.css($(".example"), "height"); // "open" height
var minHeight = Jelo.css($(".example h1"), "height"); // "closed" height
var handle = $(".example h1"); // our panel's title bar
Jelo.on(handle, "click", function() {
  
  // evaluates to "true" when the panel is already collapsed
  var expand = (Jelo.css($(".example"), "height") == minHeight);
  
  Jelo.Anim.ate({
      me     : $(".example"),
      css    : "height",
      to     : expand ? maxHeight : minHeight,
      easing : "smooth"
  });
  
});

Collapsible Panel - CLICK THIS TITLE BAR

Run the Jelo Shot above by clicking the orange icon, OR just click the blue bar at the top of this box.

Click it again to bring this paragraph back.


See Jelo API for complete details.