How to Create Accordion/ Collapsible Content Using CSS and JavaScript

Create collapsible content accordion in css javascript
Create collapsible content accordion in css javascript
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

Learn How to Create Hide Show Content Using JavaScript or Accordion/ Collapsible Content. Hi, In this article, I will show you how to Create Accordion/ Collapsible Content Using CSS and JavaScript, HTML and CSS.

We will create an Accordion or collapsible content section for your website using HTML CSS and JavaScript. We can use HTML, CSS, and JavaScript coding to create stylish and dynamic web elements. And one useful element you can build is an accordion menu.

Create Accordion/ Collapsible Content Using CSS and JavaScript

You will learn how to create an Accordion menu or collapsible content section on your website. When the user clicks on the button, a drop-down content will be displayed.

On click second time the collapsible content will be hidden. Building an accordion section with HTML, CSS is very important in a website. It occupies the minimum space and makes your website interactive for users.

Important Search Terms:

  • How to Create Hide Show Content Using JavaScript?
  • How do you make an accordion in JavaScript?
  • Can you use CSS and JavaScript together?
  • What is accordion JavaScript?
  • What is an HTML accordion?

Source Codes

Now you will get the source codes to create Create Accordion/ Collapsible Content Using CSS and JavaScript.

HTML Source Code

The following is the HTML source code. Copy and paste the code into your project file.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <!-- Adding font awesome icons offline -->
  <script src="https://kit.fontawesome.com/a797177d26.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>OUR SERVICES</h1>
    <button class="accordion"> <i class="fas fa-user"></i> Web Design</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.</p>
    </div>

    <button class="accordion"> <i class="fas fa-video"></i> Photography</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat</p>
    </div>

    <button class="accordion"> <i class="fas fa-edit"></i> Content Writing</button>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.</p>
    </div>
  </div>
  <script src="accordion.js"></script>

</body>

</html>

CSS Source Code

The following code is the CSS code for the accordion. Copy and paste the below code in the CSS file of your web project.

body{
  background-color: rgb(190, 127, 240);
}
.container{
  padding: 100px;
}
.accordion {
  background-color: darkolivegreen;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px lightgray;
  text-align: left;
  outline: none;
  font-size: 17px;
  transition: 0.5s;
}

.active, .accordion:hover {
  /* active class will be use in javascript */
  background-color:rgb(53, 53, 53);
}

/* Adding font awesome icones in CSS code */
.accordion:after {
  font-family: "Font Awesome 5 Free";
   content: "\f13a";
   font-weight: 900;
  float: right;
  margin-right: 10px;
}

.active:after {
  font-family: "Font Awesome 5 Free";
   content: "\f139";
   font-weight: 900;
  float: right;
  margin-right: 10px;
  color: chartreuse;
}

.panel {
  padding: 0px 18px;
  background-color: rgb(236, 236, 236);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

button i {
  margin-right: 6px ;
  font-size: 20px;
}

Recommended Article: How to Make a Transparent Login Form in HTML with CSS Source Code

JavaScript Source Code

Below is the JavaScript source code to make the accordion collapsible and interactive. Copy and paste the following code into the JS file of your project.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  /* loop will continue to run till the length of accordion element */
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

Final Words

An accordion is a collapsible section of a web page. When the user clicks on the accordion button the content will be shown or hidden. We have created it by using HTML, CSS, and javascript code. Please don’t forget to subscribe to my YouTube Channel to watch more useful tutorials.

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

3 Responses

  1. It¦s actually a great and useful piece of info. I¦m satisfied that you simply shared this helpful info with us. Please stay us informed like this. Thank you for sharing.

  2. I’m not that much of a internet reader to be honest but your sites really nice, keep it up! I’ll go ahead and bookmark your website to come back later on. Cheers

Leave a Reply

Your email address will not be published.