Create CSS Accordions Without Using JavaScript - MobileAppDaily
App Design

Create CSS Accordions Without Using JavaScript

Know the best ways to create CSS-only Accordions

https://dk2dyle8k4h9a.cloudfront.net/Create CSS Accordions Without Using JavaScript

Top Companies

01.
InMobi
Singapore
02.
Dot Com Infoway
New York, USA
03.
M&C Saatchi Mobile
New York City, USA
04.
Techmagnate
New Delhi, India
05.
Fetch
London, UK
View full report
Updated On
August 29, 2018 07:11 PM
3 min read

Latest Articles

An Accordion is used to show and also hide the HTML content pieces. The user can use the w3-hide class in order to hide the accordion data or use any kind of button to open as well as close that piece of content.

There are several ways to create the accordion effect with the help of JavaScript but in this article, we will be sharing some information on how you can create accordions only using HTML and CSS.

Example of how to create the Accordion

script

Difference between Accordion and Dropdown

A majority of people confuse Accordion with the Dropdown so here are few key differences to distinguish them:

  1. In an accordion, the content is usually 100% wide whereas, the default setting of a drop-down allows the content to be only 160 pixels wide.
  2. The content in an accordion always pushes the page's content down but when it comes to dropdown the content covers the existing page's content.
  3. In an accordion, the user often gets to open multiple sections whereas, in a dropdown, only one section opens up.

The Content Accordions are one of the most highly used accordions that makes a great useful pattern and effective design. The user can try a number of different things with content accordions like:

  • Text Snippets
  • Menus
  • Lists
  • Images and Videos etc.

A majority of accordions rely on JS i.e. JavaScript because of JQuery and its features but now we have the advanced CSS3 techniques at our service. With these advanced CSS3 techniques, now we are able to create excellent accordions by only using CSS and HTML.

Mainly, when it comes to building CSS-only accordions only two approaches are taken into consideration. And each of these two approaches further utilizes the hidden-form elements and the usage of CSS pseudo-selectors.

Best Methods to create CSS-only Accordions

Below are the methods that can be used for creating CSS-only accordions without JavaScript:

Checkbox Method

The checkbox method is a great way to create CSS accordions as it utilizes the checkbox input type instead of going for the radio button type. So, when a user selects a tab, he/she is basically checking the corresponding checkbox.

  <div class="css-only-accordion">
<div>
<input type="checkbox" name="tab-1" id="tab-1">
<label for="tab-1">Title of Tab 1>/label>
<div class="tab-content">
<h2>Content Title (don't use h1 tag here) </h2>
<p>Some content.... >
</div>
</div>
</div>

When compared to the Radio button method, we can see that it's impossible to check two boxes at the same time. Just like, the user can never open two tabs in a single period of time.

Radio Button Method

With the method of Radio Button, the user can add a hidden radio input as well as a corresponding label tag to each tab in the accordion. The logic that goes behind this method of creating CSS accordion is that whenever someone selects a tab then the user is checking a radio button attached to that particular tab.

<div class="css-only-accordion">
<div>
<input type="radio" name="tab-1" id="tab-1">
<label for="tab-1">Title of Tab 1</label>
<div class="tab-content">
<h2>Content Title (don't use h1 tag here)</h2>
Some content.... </div>
</div>
</div>

So, as the user moves on to the next tab, they can click on the next radio button that is attached to that tab. This similar concept can be found in an online form.

The :hover Method

This is another excellent method to create some great CSS-only accordions without using any JavaScript. The :hover method overcomes the limitation of changing URLs that are faced by some other methods, for example, the :target method.

The :hover is a CSS pseudo-selector where the tabs won't be reacting to the clicking effect of the users. This method makes sure that the CSS accordions work on the hovering effect of the user's activities on the page. So, if a user wants to close a tab from the CSS accordion then he/she need to unhover from that tab.

In the traditional CSS accordions, one of the menu elements always remains open even if the user clicks on the other element. The previous menu element closes but then the next one remains open.

The CSS accordions that are created without using JavaScript are less fancier and shows a simplified version of a menu and its tabs, providing a smooth user interface.  

Let us know what you think about these methods to create CSS-only Accordions by leaving your 'Comment' in the section down below.

Read More About:

Vikram Khajuria
Written By
Vikram Khajuria

A typical boy and tech enthusiast, Vikram is totally fascinated by the journey of his day from miseries to joys. Covering the journalism field, he writes at MobileAppDaily and keeps surfing the trends to understand tech and inventions better. Don’t forget his driving skills, he is a professional car rallyist. Life has just got better, breath it!!

App Design

Top 5 Mobile App Design Trends Expected in 2018

James Lawson 7 min read  

2017 was all about mobile app technology and the invasion of the latest trends in the mobile app sector. The mobile app design has experienced a significant transformation and still moving towards the more influencing advancements. The latest mobile app design trends are nothing but improving the us

App Design

Understanding the Notable Website and App Design Differences

James Lawson 4 min read  

Website and Mobile app are two most important mediums which are used to convey information about the business or any kind of special offers. Designers who work on both these kinds of designs view them as two different things. The biggest misconception is both these mediums are interchangeable and th

App Design

5 Ways to Add Engaging Design to Your App

James Lawson 4 min read  

Mobile applications are literally dominating the world with their outstanding benefits and extreme outreach. Numerous amount of applications added to the app world daily, a large portion of them directly goes to dark places. creation of an application from idea to live product is transformed by the

App Design

From Cost To ROI, These Mobile App Design Guidelines Cover Everything

Akash Singh Chauhan 4 min read  

Are there any particular Mobile App Design Guidelines? If yes, what are they?Is the question that is faced by every single person who is building a web or mobile application and reaches at the designing stage of the app.The answer to this question is not a one-liner as this question alone ha