Accordion(Show/hide) Content Using Html Css Javascript Code

Accordion(Show/hide) Content Using Html Css Javascript Code

Hello coders🧑‍💻!! In this blog we will create an Accordion expandable/collapsible content using html ,css and javascript . This project is basically about how we use javascript events to show or hide the content of the document. In this project some sort of headlines  are given  and when you just click on them the related content will show up .

This project is completely beginnner friendly . By the end of this article you will able to make your own accordion using  html,css and javascript.

Accordion(Show/hide) Content Using Html Css Javascript Code
Accordion(Show/hide) Content Using Html Css Javascript Code

How to create expandable/collapsible content with HTML, CSS, and JavaScript?

I hope you must have got an idea about the project.

So,  Let’s Begin the expandable content Project By Adding The Source Codes.  first We Are Using The Html Code.

Step1: Adding HTML code 

HTML stands for Hyper Text Markup Language, and it provides structure to our website.

ALL HTML documents begin with <!doctype HTML>, which tells the browser that our code adheres to the most recent HTML version.

The HTML document begins with <html> and ends with </html>.

The main tag is <body>, where we will write all of our content that will be displayed on the browser later.

Now we’ll take a look at our HTML code.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="" content="" />
    <title>Heart</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>FAQ</h1>

    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-item-header">What is Web Development?</div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            Web Development broadly refers to the tasks associated with
            developing functional websites and applications for the Internet.
            The web development process includes web design, web content
            development, client-side/server-side scripting and network security
            configuration, among other tasks.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">What is HTML?</div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            HTML, aka HyperText Markup Language, is the dominant markup language
            for creating websites and anything that can be viewed in a web
            browser.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          What are some basic technical skills of a Front-End developer?
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <ul style="padding-left: 1rem">
              <li>HTML, CSS, JavaScript</li>
              <li>Frameworks (CSS and JavaScript frameworks)</li>
              <li>Responsive Design</li>
              <li>Version Control/Git</li>
              <li>Testing/Debugging</li>
              <li>Browser Developer Tools</li>
              <li>Web Performance</li>
              <li>SEO (Search Engine Optimization)</li>
              <!-- <li>CSS Preprocessing</li> -->
              <li>Command Line</li>
              <li>CMS (Content Management System)</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">What is HTTP?</div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            HTTP, aka HyperText Transfer Protocol, is the underlying protocol
            used by the World Wide Web and this protocol defines how messages
            are formatted and transmitted, and what actions Web servers and
            browsers should take in response to various commands.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">What is CORS?</div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables
            many resources (e.g. images, stylesheets, scripts, fonts) on a web
            page to be requested from another domain outside the domain from
            which the resource originated.
          </div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Our website’s structure begins with a heading (H1), “FAQ.” This is the title of our website. Then we made a main div with the class “accordion,” which is the main element that contains all of the collapsible items.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

Second, we created another div that contains the first question, and then we created a div with the class accordian-item-body that contains the expandable content that will be hidden after the document loads up, and the expandable content will appear when we click on the question.

Similarly, we created a number of div tags for various questions with expandable content.

We used the unorder list tag to create an unordered list in some of the expandable content.

We’ll now look at the structure in the browser window to see how it looks without any styling.

Preview:

Accordion(Show/hide) Content Using Html Css Javascript Code
Accordion(Show/hide) Content Using Html Css Javascript Code

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Step2: Adding CSS code

CSS is an abbreviation for Cascading Style Sheet. CSS will be used to style our webpage so that it looks appealing, and CSS is used to improve the user experience.

Now let’s take a look at our CSS code.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #34495e;
  color: #fff;
}
h1 {
  text-align: center;
  margin: 2rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:767px) {
  html {
    font-size: 14px;
  }
}

Now that we’ve included our CSS code in our article, let’s go over it step by step.

Simple Portfolio Website Using Html And Css

Step1: First, we have imported our Google Fonts into the document so that we can use them later on to change the font style of our content. Then using our universal selector  (*), we just selected all our elements and defined margin and padding as zero and box-size as a border box.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Step2: Then we chose our body tag and gave it a font family and background colour of dark blue with a font colour of white. Then, using the H1 tag, we selected the main heading of our webpage and aligned it to the center, giving margin values of 2 rem for top and bottom and zero for left and right, and setting the font size to 2.5 rem.

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #34495e;
  color: #fff;
}
h1 {
  text-align: center;
  margin: 2rem 0;
  font-size: 2.5rem;
}

Step3: Now selecting element  by class selector and background colour as white to the corrensponding class elements where we define that class. we also provide the box shadow to the elment . Now using puesdo class element (.accordian-item-header : : after ) we are changing the content (“\002B” = “+”)  and positioning them as aboslute.

.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

Step4: Now using we will use media for the responsiveness of our webpage we define the max-width  and if the content is larger then the given width then the html font -size changes to 14px

@media(max-width:767px) {
  html {
    font-size: 14px;
  }
}

Now we have completed our css code and below👇here is the output after styling our webpage.

Preview:

Accordian

Step3: Adding javascript code

We use javascript to our webpage to add the functionality of expandable content.

Now let’s take a look at our CSS code.

const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {

    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
    
  });
});

Now using document.queryselectorAll we are selecting (.accordian-item-header) class and storing its value in the constant variable. now using the constant variable we will be adding  click eventlistener to each of the element we have selected. The click event will be used  to toggle between adding and removing active class . Now using nextelementsibling property we will be accessing adjacent sibling and will check if the accordionitemheader has active class  then we will give maximum height to the height of the content using scrollheight property and if the class is not active then maximum height will be zero.

Now as we compeleted our project now will look at how it is working .

Preview: 

See the Pen
Accordion
by Coding Journey (@Coding_Journey)
on CodePen.

Now We have Successfully created our Expandable/collapsible poject. You can use this project for your personal porfolio and WE hope you understood the project , If you any doub’t feel free to comment!!

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @codingJourney
Share on:

Leave a Comment