HTML Expand Collapse Text without JavaScript

A few days back, I needed an accordion to toggle plain text using only CSS. I searched on the web, but didn’t find what I needed. So, I decided to code a simple and straightforward HTML & CSS based accordion to expand and collapse text without using JavaScript.

Generally, an accordion is used to make expandable HTML contents on a Web page. For heavy contents websites we need a multi-functional accordion plugin that comes with multiple configuration options. No doubt, a number of accordions (for JavaScript libraries like jQuery, React Vue.js etc.) are already available in the market. But for lite version web projects, we really need something that can be done without using JavaScript.

If you are looking for a lightweight pure CSS accordion, then this tutorial might be helpful for you. Here, we’ll create an expandable and collapsible accordion using HTML & CSS. So, let’s start with the basics.

HTML Structure to Expand Collapse Text

Initially, we’ll build an HTML structure for our accordion to expand collapse text but without using JavaScript. One thing I want to mention here that finished output of accordion will works like other JS based accordions. So, the users can’t judge whats behind it. Because this accordion also will have same user experience like other JavaScript accordions.

In HTML structure, we’ll define a section tag with class name “accordion” and all other elements wrap into it. The basic expand and collapse structure is as follows:

<section class="accordion">
  <input type="radio" name="collapse" id="handle1" checked="checked">
  <h2 class="handle">
    <label for="handle1">
    The Visible Short Heading 
    </label>
  </h2>
  
  <div class="content">
    <p>Your detailed contents...</p>  
  </div>
</section>

As you can see above code, you need to place an input tag (with type checkbox or radio) just before the label tag. The label tag will be used for visible short heading of the accordion while the div tag (that placed after the label tag with class name “content”) will be used for detailed information.

Similarly, you can add multiple collapsible elements just like the above structure. You just need to update input and label IDs. Such as, for second accordion:

  <input type="radio" name="collapse" id="handle2">
  <h2 class="handle">
    <label for="handle2">
     Another Heading 
    </label>
  </h2>

Increase ID number for both input and label. You are not limited to use input type radio only. You can also use input type checkbox. However, the output is quite different (can be see on demo page). Its depends on you what you want to produce. Here the main output (in regards to accordion) difference between radio and checkbox type.

  • Radio input: Close other opened accordion when select a new one but not toggle same accordion.
  • Checkbox input: Toggle (show / hide) accordion contents but not close others.

Now, its your choice which type of output you want to get.

CSS Styles for Accordion

Now, it’s time to style and functionalities the accordion using CSS. In CSS coding,  first of all we’ll hide the input element. If you are thinking why I said that, then here is my answer:

The input with type “radio” or “checkbox” will be used to get checked and unchecked value through the label tag. The label tag we placed under h2 (that has class handle) for visible area of collapsible text. So, the actual HTML input radio element must be invisible from the users.

To hide input tag, we have several methods in CSS. But, here I’ll recommend only two methods. It’s your choice which you’ll find batter for you. The first one is:

.accordion > input[name="collapse"] {
  display: none;
}

Similarly, you can do this:

.accordion > input[name="collapse"] {
  position: absolute;
  left: -100vw; /* Behind the scene */
}

After this, we’ll design the accordion’s content area. On page load, this area will not be visible to the users. It will expand on click event (that we’ll get from CSS :checked pseudo selector). So, the CSS code block is as follows:

.accordion .content {
  background: #fff;
  overflow: hidden;
  height: 0;
  transition: 0.5s;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

We used 0 value for height and overflow kept to hide. We did so to bring smoothness while toggle (hide & show) text contents. Keep in mind that display none property will also work here, but CSS transition attribute (for smoothness) is not compatible with it.

Now, we’ll design the visible area (heading of text contents). You can use custom colors and other CSS styles for this according to your needs.

.accordion label {
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  padding: 10px;
  background: #b0100c;
  
}

.accordion label:hover,
.accordion label:focus {
  background: #252525;
}

.accordion .handle label:before {
  font-family: FontAwesome;
  content: "\f107";
  display: inline-block;
  margin-right: 10px;
  font-size: 1em;
  line-height: 1.556em;
  vertical-align: middle;
  transition: 0.4s;
  
}

.accordion > input[name="collapse"]:checked ~ .handle label:before {
    transform: rotate(180deg);
    transform-origin: center;
    transition: 0.4s;
}

In the above CSS code block, I included Font Awesome angle up icon that will rotate to 180° when text contents expended. If you don’t want to use arrow down icon with accordion heading then simply remove the lebel:before code block.

Finally, define height value (according to the text length in content div) with :checked selector to smoothly expand collapse text in accordion.

.accordion > input[name="collapse"]:checked ~ .content {
  height: 380px;
  transition: height 0.5s;
}

You can also set height value to auto but it will not expand contents smoothly. However, other functionalities will remain same.

That’s all! we have done, if you have any question let me know by comment below.

You May Also Like

Leave a Comment