How to make a tl;dr control

A while back, a colleague at work pointed out a nifty tl;dr slider on the Parametric Press site. You can move it all the way to the left to get the gist of the article. The further you move it to the right, the more words (and details) you’ll get.

I took a peek to see how it was built, and it appears to be tied into Idyll, which renders things with React. Most of it is implemented in a React component named Conditional which sets the style tag on a div to display: none if some condition — probably specified in each tag — isn’t met.

Idyll looks neat, but what if you want to apply this to a simple web page that you don’t want to convert to it? What if, like me, you avoid React when possible?

Fortunately, the concept is really simple, which is the best kind of clever concept. I thought for a moment about building some kind of module so everyone that uses modules could add such a slider, but the best way to enable people to get this into their web app is to just explain it. A module would have to bend over backward to anticipate the varying conditions it might be used in. Whereas a person understanding the concept can easily apply it.

So, here it is:

You put a slider on the page. (An input element with type range.)

You add JS code that listens to change events from the slider and uses the values from the slider to modify the classes on the body element. For example, if the user moves the slider to 3, then it adds the class show-3 to the body. Here’s an implementation:

  var slider = document.getElementById(‘tldr-slider’);
  slider.addEventListener(‘change’, onTLDRChange);

  const maxLevel = +slider.max;

  function onTLDRChange() {
    updateTLDRClasses();
  }

  function updateTLDRClasses() {
    const level = Math.round(slider.value);
    for (var i = 0; i <= maxLevel; ++i) {
      let className = “show-“ + i;
      if (i <= level) {
        document.body.classList.add(className);
      } else {
        document.body.classList.remove(className);
      }
    }
  }

  updateTLDRClasses();

You create a CSS class like tldr that has the property display: none. You put this class on every element that might possibly be hidden.
Also, you create CSS rules for each level of detail you plan to have. Each one will set their element to display: block (or flex or what have you). The conditions they’ll look for is “the ‘level’ class is a child of the ‘show’ class.” For example:
```
.show-2 .lvl-2 {
  display: block;
}
```
How the class is used:
```
<div class=”tldr lvl-2”>Hey, this isn’t very important information! It will
be hidden if the slider has a value of less than 2!</div>
```

Now, when the user moves the slider to 2, body will have the classes show-1 and show-2. An element that has the classes tldr and show-2 will then satisfy the rule “child of show-2 that has the class lvl-2”, and display will be set to block instead of the default none (which comes from the tldr class).

When the user moves the slider down to 1, body will have the class show-1, and the condition for the above rule will no longer be met, so displaywill stay none, and the element won’t show.

So, knowing this, you’ll have something you can apply in any framework (or lack thereof), you’ll understand how it actually works, and it’ll be (negligibly) more performant because only one DOM element’s properties are being modified.

If you want a working example, I was looking at this so I could have a tl;dr control on my resume site. You can use your browser’s dev tools to check it out or see the source here.