Create Collapses using Native Javascript, HTML and CSS

Video Tutorial

Getting Started

Collapses can help you organize your data and elements better on your application, benefit from more usable space on your design layout or just use for making the design looks cool so this what collapses are for.

Collapse is basically a list which can show and hide depending on the current state (toggle) by toggling a target element (button) generally is composed of two major sections, the header which is actually the toggle button and a content the one which gets toggled between the visible and hidden states.

There is a lot of libraries that help you to achieve the collapse functionality right out of the box without typing a lot of code or even not understanding how actually works (pretty much like jquery) for those of you who have been using those libs this tutorial will help you create your own collapses with a native javascript code and custom HTML Collapse structure of your own.

We are going to use CodePen.io for this project since it is very lightweight and simple to get started with.

Collapses Structure

Basically, a collapse has a header and a content container so the structure should be very simple for you also, you can add custom elements to it or icons for making it looks a bit more professional but the following design seems to be good enough for you to use.

<div class="main-container">
  <div class="coll-container">
    <div class="coll-header">Collapse it!</div>
    <div class="coll-content">
      <div class="coll-item">Item 1</div>
      <div class="coll-item">Item 2</div>
      <div class="coll-item">Item 3</div>
      <div class="coll-item">Item 4</div>
      <div class="coll-item">Item 5</div>
      <div class="coll-item">Item 6</div>
    </div>
  </div>
</div>

And the CSS Style

.main-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Oxygen, sans-serif;
} 

.coll-item {
  color: #fff;
  font-size: 19px;
}

/*IMPORTANT*/

.coll-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  margin-top: 4em;
  position: relative;
}

.coll-header {
  width: 100%;
  height: 29px;
  padding: 8px;
  color: white;
  cursor: pointer;
  font-size: 22px;
  background-color: #00a8ff;
}

.coll-content {
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  box-shadow: 0px 0px 4px 0px rgba(15, 15, 15, 0.2);
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  background-color: #496279;
  color: #fff;
  width: 99%;
}
  /*END*/

For Collapses to work properly it all depends on the CSS style and the right HTML Structure where the javascript part is all about changing the current state (toggling between the visible and hidden states).

Toggling Collapse (Show & Hide)

First, we need to reference the Collapse containers (The Header and the Content containers) so we would be able to bind event and listen for toggle changes as well as set the styles whenever we need to toggle between the two different collapse states.

//Collapse Content Container 
let collapseContent = document.getElementsByClassName("coll-content")[0];
//Collapse Header (toggle button)
let collapseHeader = document.getElementsByClassName("coll-header")[0];
/*Since we are using classes only for one elements on the DOM then we access the first element on the array */

Now we actually need to bind the click event on the Header since we want to show or hide the content container whenever the user presses the collapsed header.

//Always Starts in Hidden Mode
collapseContent.style.visibility = "hidden";
//Custom Javascript (You can Implement it in a better way!) (ES6)
//On Click Event the Header 
collapseHeader.onclick = () => {
  //For Toggling we need to know the current state of the collapse then change it
  if(collapseContent.style.visibility == "hidden") {
    //Collapse is already hidden, then show it
    collapseContent.style.visibility = "visible";
    collapseContent.style.opacity = "1";
  } else if (collapseContent.style.visibility == "visible") {
    //Else, hide the collapse
    collapseContent.style.visibility = "hidden";
    collapseContent.style.opacity = "0";
  }
}

When clicking the header we first check the current state of the collapse if it is hidden then we need to show it by setting the visibility to visible and opacity to 1 (Opacity will be used for animation) otherwise hide the collapsed content.

Also, we have to set the initial state of the collapse to hidden cause we always need the collapsed content to be hidden when the user first refreshes the page.

Collapsing Animation

For Collapses there still one another thing needs to be implemented which is the collapsing animation, the animation is about changing the height expand one showing it and shrink when we hide the collapse quite simple.

We will use CSS Transition to animate the collapsed content.

/* Add it to the coll-content */
.coll-content {
...
   max-height: 0px;
   transition-property: max-height;
   transition: 300ms ease-in;
...
}

we are going to animate the height (max height property) in 0.3 seconds duration using the ease-in transition, the main reason behind using the max height instead of height property is because we want from the content container to take an auto height when it is visible and that is only possible if we use max-height property since it only sets a max height but not the actual height and will make it takes an auto height (if we would set height property to auto the animation won’t work!

Now we have to change the max height when toggling the content container.

//Add it the the on click function 
collapseHeader.onclick = () => {
...
  if(collapseContent.style.visibility == "hidden") {
    collapseContent.style.maxHeight = "300px";
  } else if (collapseContent.style.visibility == "visible") {
    collapseContent.style.maxHeight = "0px";
  }
...
}
//Increase The Height when showing it and decrease it when hidding

Now you take a look on your collapse you should be able to animate between the collapsed states by pressing the header container, generally, on the collapsed content you add and items in a column order (links) or you could put in text.

Here is the CodePen Source Code of the final Collapse that we have built together. CodePen Embed - Elegant Collapse using Native JS Collapse Content Container let collapseContent = document.getElementsByClassName("coll-content")[0]; //Collapse Header…codepen.io

What’s Next

As you have noticed working with collapses in a native way is quite simple and easy create, now you take this to the next level by adding more advanced structure to the collapse with icons and more transitions, if you still can’t figure out how it actually works you may want to learn more about the DOM manipulation using native javascript.

No Comments Yet