Sha256: 7cd30396676e54afe8e6d2db59ae96933550f798bb8117ca726d15c6dede3510

Contents?: true

Size: 1.09 KB

Versions: 363

Compression:

Stored size: 1.09 KB

Contents

export const showElement = (elem: HTMLElement) => {
  elem.style.display = 'block';
  const height = elem.scrollHeight + 'px'; // Get its height
  elem.style.height = height; // Update the max-height
  elem.classList.add('is-visible');
  elem.style.overflow = "hidden"
  // Once the transition is complete, remove the inline max-height so the content can scale responsively
  window.setTimeout(() => {
    // If a user toggles multiple times quickly in a row, 'is-visible' can be removed by hideElement's timeout
    if (!elem.classList.contains('is-visible')) {
      elem.classList.add('is-visible')
    }
    elem.style.height = '';
    elem.style.overflow = "visible"
  }, 300);
};

export const hideElement = (elem: HTMLElement) => {
  elem.style.height = elem.scrollHeight + 'px';

  window.setTimeout(() => {
    elem.style.height = '0';
    elem.style.paddingTop = '0';
    elem.style.paddingBottom = '0';
    elem.style.overflow = "hidden"
  }, 1);

  // When the transition is complete, hide it
  window.setTimeout(() => {
    elem.classList.remove('is-visible');
    elem.style.overflow = ""
  }, 300);
};

Version data entries

363 entries across 363 versions & 1 rubygems

Version Path
playbook_ui-14.11.0.pre.rc.17 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.16 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play16825301 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.15 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.14 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.13 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.12 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5274 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1465attempt25272 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play16825244 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.11 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.11.0.pre.rc.10 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5214 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5213 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5210 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5208 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5207 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play16825206 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5204 app/pb_kits/playbook/pb_collapsible/_helper_functions.ts