Creating a Responsive Tabs and Accordion using HTML, CSS, and JavaScript Tutorial

vallncia · 2025-02-27T03:22:35+0000

This is a simple tutorial on how to create Responsive Tabs and Accordion using HTML, CSS, and JavaScript. The tutorial aims to provide the students and beginners with a reference for learning some usable user interfaces and functionality for building a responsive website. Here, snippets and scripts of a sample web page that demonstrate this tutorial's topic is provided and the source code zip file is also available and is free to download.

What is a Tabs?

In web applications, websites, or computer software, Tabs are inline buttons or menus that open another area that contains content. This feature is commonly used for separating the page/window contents to easily navigate. Implementing this kind of feature in a single-page website or program is a great idea to prevent long scrolls and organize the page contents.

What is an Accordion?

Accordion is a list of content headers that trigger to show the content below the item header when click. Unlike the tabs, this feature is displayed vertically and the contents are revealed below the clicked item header.

How to create Responsive Tabs and Accordion?

Nowadays, there are a lot of very useful CSS frameworks available that come with Tabs and Accordion components such as the Bootstrap Framework. Here, I will show you how these components are being made from scratch using HTML, CSS, and JavaScript. We can achieve these components by simply designing the HTML Elements into a Tab or Accordion type and adding some JS lines of code to make it functional.

I will be providing the scripts of a simple web page that contains a Tab and Accordion components. The web page will organize the contents of the page using Tab Menu when the window screen is wider than the mobile devices such as tablets, laptops, and desktops otherwise it will be shown using Accordion.

HTML

Here's the HTML script of the web page. It contains the elements that will be used for displaying the tab/accordion headers and contents.

index.html

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

JS - Responsive Tabs/Accordion</

title

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
</

head

>
<body

>
<h1

style

=

"text-align:center"

>

Responsive Tabs/Accordion using HTML, CSS, and JavaScript</

h1

>
<section

>
<div

class

=

"custom-tabs-accordion"

>
<div

class

=

"custom-tabs-accordion-header-container"

>
<div

class

=

"custom-tabs-accordion-header active"

data-target

=

"tab1"

>
<b

>

Tab 1</

b

>
</

div

>
<div

class

=

"custom-tabs-accordion-header"

data-target

=

"tab2"

>
<b

>

Tab 2</

b

>
</

div

>
<div

class

=

"custom-tabs-accordion-header"

data-target

=

"tab3"

>
<b

>

Tab 3</

b

>
</

div

>
</

div

>
<div

class

=

"custom-tabs-accordion-body-container"

>
<div

class

=

"custom-tabs-accordion-body active"

data-tab=

"tab1"

>
<p

>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus omnis architecto, quasi totam deleniti dolorum dolor earum sequi ut sint ducimus nobis, quia nemo modi odio accusamus consequuntur reiciendis voluptatibus.</

p

>
</

div

>
<div

class

=

"custom-tabs-accordion-body"

data-tab=

"tab2"

>
<p

>

In vulputate consequat sollicitudin. Suspendisse venenatis efficitur leo et finibus. Integer in dictum urna, sit amet mattis eros. Nullam ut mi efficitur, bibendum justo a, bibendum diam. Morbi ante justo, dignissim eu tristique eu, imperdiet at massa. Sed pellentesque dolor non massa malesuada, vitae molestie enim scelerisque. Aenean aliquet urna vel turpis consectetur scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae rhoncus mauris, ut maximus mi. Proin tempor ut nisi vel lobortis. Maecenas iaculis arcu a ex pulvinar dictum. Pellentesque a elit non nibh venenatis hendrerit.</

p

>
</

div

>
<div

class

=

"custom-tabs-accordion-body"

data-tab=

"tab3"

>
<p

>

Nam pulvinar vel metus nec porttitor. Fusce in est augue. Suspendisse et elit bibendum, porttitor sapien eget, malesuada dui. Mauris dapibus pretium sollicitudin. Pellentesque lobortis lacus eu nibh posuere, vitae pellentesque dolor pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin tincidunt ornare neque, at finibus nisl varius a. Nullam fermentum magna at massa varius, nec malesuada elit lobortis. Sed ullamcorper libero et urna auctor, in faucibus velit tempus. Curabitur euismod porttitor diam nec finibus. Donec sodales in nulla eu aliquet. Morbi nec ipsum condimentum, aliquet turpis eu, dictum libero.</

p

>
</

div

>
</

div

>
</

div

>
</

section

>
<script

src

=

"script.js"

></

script

>
</

body

>
</

html

>

CSS

Here's the stylesheet of the web page design. It contains the styles scripts of the web page layout, tabs, and accordion.

style.css

/**
* Web Page Container Design
*/
html,
body{
height

:

100%

;
width

:

100%

;
margin

:

0

;
}
body {
background-color

:

#cec9c3

;
padding

:

50px

0px

;
}
section{
padding

:

50px

75px

;
}
/*
* Styles for Tabs
*/
.custom-tabs-accordion

{
position

:

relative

;
}
.custom-tabs-accordion

.custom-tabs-accordion-header-container{
display

:

flex;
width

:

100%

;
position

:

relative

;
flex-direction

:

row;
}
.custom-tabs-accordion

.custom-tabs-accordion-header-container

.custom-tabs-accordion-header

{
border

:

1px

solid

gray

;
padding

:

5px

10px

;
background

:

#f4f4f4

;
cursor

:

pointer

;
}
.custom-tabs-accordion

.custom-tabs-accordion-body-container{
display

:

flex;
flex-direction

:

column;
position

:

relative

;
}
.custom-tabs-accordion

.custom-tabs-accordion-body{
border

:

1px

solid

#d8d8d8

;
background

:

#fff

;
overflow

:

hidden

;
height

:

0

;
transition

:

height .3s

ease-in-out;
position

:

absolute

;
}
.custom-tabs-accordion

.custom-tabs-accordion-header

.active,
.custom-tabs-accordion

.custom-tabs-accordion-header

:

hover

{
background

:

#dbd2d2

;
}
.custom-tabs-accordion

.custom-tabs-accordion-body

.active{
height

:

auto

;
padding

:

5px

10px

;
position

:

relative

;
}
/*
* Styles for Accordion
*/
@media

(

max-width

:

480px

)

{
.custom-tabs-accordion

.custom-tabs-accordion-header-container{
display

:

flex;
flex-direction

:

column;
width

:

100%

;
position

:

relative

;
}
.custom-tabs-accordion

.custom-tabs-accordion-header

.active,
.custom-tabs-accordion

.custom-tabs-accordion-header

:

hover

{
background

:

#dbd2d2

;
}
.custom-tabs-accordion

.custom-tabs-accordion-body

.active{
height

:

auto

;
position

:

relative

;
padding

:

5px

10px

;
}
}

I have added some comments on the stylesheets so you can easily find the style of the layout and components. The CSS file is included in the HTML script.

JavaScript

The below script is the JS script that contains the codes that make the accordion and tabs functional. It also contains the code for resizing the content containers when the window screen is resized.

script.css

const

tabsContainer =

document.querySelector

(

'.custom-tabs-accordion'

)
const

tabsHeader =

document.querySelectorAll

(

'.custom-tabs-accordion-header'

)
const

tabsBody =

document.querySelector

(

'.custom-tabs-accordion-body-container'

)
/**
* Display Active Tab/Accordion Body
* @param {string} tab = tab header element
*/
const

TabsHeaderActive =

function

(

tab)

{
var

_target =

tab.dataset

.target
tabsContainer.querySelectorAll

(

'.active'

)

.forEach

(

el =>

{
el.classList

.remove

(

'active'

)
}

)
tab.classList

.add

(

'active'

)
tabsContainer.querySelectorAll

(

'.custom-tabs-accordion-body'

)

.forEach

(

el=>

{
el.style

.height

=

0
}

)
tabsContainer.querySelector

(

`[

data-

tab=

"${_target}"

]

`)

.style

.height

=

tabsContainer.querySelector

(

`[

data-

tab=

"${_target}"

]

`)

.scrollHeight

+

`px`
tabsContainer.querySelector

(

`[

data-

tab=

"${_target}"

]

`)

.classList

.add

(

'active'

)
}
tabsHeader.forEach

(

tab =>

{
/**
* Tab/Accordion Header Click Event
*/
tab.addEventListener

(

'click'

,

function

(

)

{
TabsHeaderActive(

tab)
}

)
}

)

;
/**
* Update Display Format to Tabs or Accordion
*/
const

TabsAccordionFormat =

function

(

)

{
if

(

window.innerWidth

<=

480

)

{
tabsBody.querySelectorAll

(

'.custom-tabs-accordion-body'

)

.forEach

(

el=>

{
var

dataTab =

el.dataset

.tab
var

cloneEl =

el.cloneNode

(

true

)
tabsContainer.querySelector

(

`.custom

-

tabs-

accordion-

header[

data-

target=

"${dataTab}"

]

`)

.after

(

cloneEl)
if

(

cloneEl.classList

.contains

(

'active'

)

==

true

)
cloneEl.style

.height

=

'auto'

;
el.remove

(

)
}

)
}

else

{
document.querySelector

(

'.custom-tabs-accordion-header-container'

)

.querySelectorAll

(

'.custom-tabs-accordion-body'

)

.forEach

(

el=>

{
// var dataTab = el.dataset.tab
var

cloneEl =

el.cloneNode

(

true

)
tabsBody.appendChild

(

cloneEl)
if

(

cloneEl.classList

.contains

(

'active'

)

==

true

)
cloneEl.style

.height

=

'auto'

;
el.remove

(

)
}

)
}
}
TabsAccordionFormat(

)
/**
* Event when the window screen is resized
*/
window.onresize

=

function

(

)

{
TabsAccordionFormat(

)
}

The JS file is also included or loaded in the HTML file script.

Snapshots

Here are the images of the web page result using the given scripts.

Tab View

Mobile View

There you go! I have also provided the source code zip file on this website and it is free to download. You can download it by clicking the Download button located below this tutorial's content. Feel free to modify the source code the way you desire to meet your own requirements.

That's it! I hope this Creating a Responsive Tabs and Accordion using HTML, CSS, and JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Download

You must upgrade your account or reply in the thread to view hidden text.

Creating a Responsive Tabs and Accordion using HTML, CSS, and JavaScript Tutorial

More options

vallncia

452,292

323,341

323,350