Member Avatar for tusharbhatia

I have seen similar questions asked before, however my question is a little bit different to the other ones that have previously been asked.

I want to make the div's expand/collapse on the jquery "click function" I have created. The difference between my question and other questions is the fact that I need to keep the maximum size at "120px" for the div's while they are in their "collapsed" state, and then need the height to be "100%" when it is in the "expanded" state.

Each parent div (i.e. div id = "1") is dynamically created from the SQL database depending on the query which is all handled elsewhere. There will be multiple of these div's on one page (again, depending on the query of the user).

Here is a jsfiddle URL to my code so far: http://jsfiddle.net/m22Gu/17/

Thank you for your time and patience and for helping me out, I'd really appreciate any answers.

  • 2 Contributors
  • 1 Reply
  • 336 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Quick, reliable approach (fits dynamic panels): treat the collapsed state as a fixed pixel height (120px) and animate to a measured pixel height for the expanded state. Percentages (100%) only work if the parent has an explicit height; otherwise you want the element’s natural content height. For dynamically created panels (as noted), use event delegation. Also follow ’s advice: use classes (and data- attributes for DB ids) rather than numeric element IDs.

A minimal jQuery pattern that measures the natural height and animates between 120px and that value:

$(document).on('click', '.panel .toggle', function () {
  var $panel = $(this).closest('.panel');
  var isOpen = $panel.hasClass('is-open');

  if (!isOpen) {
    var full = $panel.get(0).scrollHeight;               // full content height (px)
    $panel.stop().animate({ height: full }, 300, function () {
      $panel.addClass('is-open').css('height', 'auto').attr('aria-expanded','true');
    });
  } else {
    $panel.height($panel.height());                      // fix current px height so animation starts from a number
    $panel.stop().animate({ height: 120 }, 300, function () {
      $panel.removeClass('is-open').attr('aria-expanded','false');
    });
  }
});

CSS basics and practical tips:

.panel { overflow: hidden; height: 120px; }    /* collapsed baseline */
.panel .toggle { cursor: pointer; }
  • If you actually need “100% of parent”, compute parent height (e.g. var target = $panel.parent().innerHeight();) and animate to that number.
  • If panels contain images or remote content, measure after images load (or recalc on window load) because scrollHeight depends on content size.
  • Use data-db-id="42" for database IDs instead of invalid numeric ids (or id="panel-42").
  • Add role="button"/aria-expanded and keyboard handlers for accessibility.

This pattern avoids animating auto/percent directly, works with dynamically added panels, and keeps the collapsed max at 120px while expanding to the correct full height.

Member Avatar for drjohn

If you visit my www.ukfolkfestivals.co.uk site, on the country pages you will see some expanding/collapsing divs. You can copy the code (I got it from another site which gave it away free). Look for accordian.js. It uses two divs - accordianButton and accordianContent. It was originally written as a menu but is quite adaptable as you can see.

Then just apply css to get the expanded and collapsed sizes you want in the two states. the script applies two classes - "on" and "over" - which are the ones you will style.

Use a class, not an id if you want multiple divs of the same type. An id is supposed to apply to some unique item on the page eg a wrapper div or header div usually get an id as they are the only ones with that name. Also, ids can't start with a number.

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.