JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<script src="https://rawgit.com/Doist/ICE/master/ICE.js"></script>
<h1>Content toggle</h1>

<div class="td-content-toggle js-toggle-target">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus vitae maxime blanditiis cupiditate nulla tenetur, incidunt, facilis obcaecati. Non laboriosam iure at amet, mollitia fugit assumenda vitae sequi officia id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio consequuntur quidem voluptas incidunt voluptatibus sapiente, fugit odio cum non cumque quo omnis reiciendis necessitatibus temporibus, adipisci, reprehenderit velit porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum asperiores earum, aspernatur obcaecati expedita ipsam eos quidem, dolor rerum corporis, quia dolorum ut sint inventore blanditiis accusantium illum nostrum cupiditate?<br><b>This is the end.</b></p>
</div>

<button class="js-toggle-trigger" data-target=".js-toggle-target">Toggle</button>

<hr>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex qui esse, adipisci nulla maiores itaque iste dolore est eius voluptates doloribus, fugiat mollitia fuga sequi, quo, iure excepturi eum quidem!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint consequatur illum, quae quos. Explicabo voluptate repellat vel culpa, porro itaque quidem! Magni voluptatibus ratione delectus dolorem mollitia aperiam ipsam sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus maxime quo nulla cupiditate fuga ipsum provident, omnis sunt distinctio exercitationem quas! Placeat, velit rerum. Cumque ex enim, dolorum perferendis veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic inventore fugiat corporis labore necessitatibus porro quos iste repellendus sequi voluptatem expedita dignissimos quisquam atque dolore ipsa architecto, assumenda mollitia laborum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quasi esse adipisci neque nihil rem quaerat omnis nemo...

CSS

.td-content-toggle {
  background-color: #eeffaa;
  
	overflow: hidden;
  transition: max-height 250ms ease-out;
}

.td-content-toggle--collapsed {
  max-height: 0;
}

Babel + JSX

const ContentToggle = (() => {

    const settings = {
      collapsedClass: 'td-content-toggle--collapsed',
      updatesPerSecond: 6
    };

    const elements = {
      triggers: $$('.js-toggle-trigger'),
      targets: $$('.js-toggle-target')
    };

		// Setup events
    const setUpEvents = () => {
      // Click (trigger collapse)
      for (const trigger of elements.triggers) {
        trigger.addEventListener('click', () => {
          const target = $$(trigger.getAttribute('data-target'));
          toggle(target);
        }, false);
      }

      // Resize event (viewport changing)
      window.addEventListener('resize', () => {
        throttle(() => {
          resetTargetsMaxHeight(elements.targets);
        }, settings.updatesPerSecond);
      }, false);
    };
    
    // Reset targets max height
    const resetTargetsMaxHeight = (targets) => {
    	for (const target of targets) {
      	if (!$hasClass(target, settings.collapsedClass)) {
            setMaxHeight(target, target.scrollHeight);
        }
      }
    };
    
		// Toggle state
    const toggle = (targets) => {
      for (const target of targets) {
        if ($hasClass(target, settings.collapsedClass)) {
          setMaxHeight(target, target.scrollHeight);
          $removeClass(target, settings.collapsedClass);
        } else {
          setMaxHeight(target, null);
          $addClass(target, settings.collapsedClass);
        }
      }
    };

		// Set max height
    const setMaxHeight = (target, height) => {
      if (!height) {
        target.style.maxHeight = null;
      } else {
        target.style.maxHeight = height + 'px';
      }
    };

		// Throttle events
    const throttle = (callback, fps) => {
      let isUpdating = false;

      if(isUpdating) {
        return;
      }

      isUpdating = true;

      setTimeout(() => {
        requestAnimationFrame(() => {
          callback.call(this);
          isUpdating = false;
        });
      }, 1000 / fps);
    };
    
  	//...