Expand/Collapse Using HTML Code Only

Hello Coder! Welcome To the Codewithrandom Blog, In Today's Blog, We Are Going To See How To Create An Expand /Collapse Using HTML Code Only.

This Project is easy and efficient as the number of lines is less also it is like the Expand/Collapse in which it has a heading then contains two to three hidden subheadings. Likewise, We have created this project.

Expand/Collapse Using HTML Code

So,  Let's Begin Our Expand /Collapse Code Project By Adding The Html Codes.

Html Code For Expand And Collapse:-

<div class="container">

<details>
    <summary>Life Story</summary>
  <div>Nothing special, I think you're pretty cool.</div>
</details>

<details>
    <summary>Contact Info</summary>
    <div><ul>
      <li>Twitter: <a href="https://twitter.com/tejaskumar_" target="_blank">@tejaskumar_</a></li>
      <li>GitHub: <a href="https://github.com/tejasq" target="_blank">tejasq</a></li>
      </ul></div>
</details>

<details>
  <summary>Future Career Options</summary>
  <div>
    <ul>
      <li>Chief Trolling Officer</li>
      <li>Hat Model</li>
    </ul>
  </div>
</details>

</div>

Now we have added the HTML Code For Expand Collapse. In the first step, we are creating a div class with the name container. Then we added the details tag which is for adding contents and inside of it we created a heading text along with a div class for subheading which will be hidden and it will be displayed when we click on the pause icon.

Likewise, all the contents were added like a heading under the sub-heading category but here the subheading will also be a link.

So, That's for HTML and here there is no need for CSS as everything is done under this HTML Code.

Now Make Sure to use the project given in the output section along with the preview.

Now We have Successfully created our Expand /Collapse using  HTML Code Only.

If you want to Basic CSS styling for Expand /Collapse so here is CSS Code with a little bit of animation.

CSS Code For Expand And Collapse:-

1. Container Styling With Basic Css Code
.container {
  margin: 20px auto;
  max-width: 600px;
  padding: 20px 0;
  background-color: #f7f5f8;
  border-radius: 10px;
  }

2. Details Styling With Summary Text Or Elements

details {
  margin-bottom: 20px;
}

details summary {
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
}

3. Expand and collapse Styling

details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 25px;
  transform: rotate(0deg);
  transition: transform 0.6s ease-in;
}

details[open] summary::after {
  transform: rotate(45deg);
}

details div {
  margin-top: 13px;
  padding: 12px;
  background-color: #fff;
  border: 1px solid red;
  border-radius: 7px;
   transform: translateY(-10px);
  transition: all 0.2s ease-in;
}

details[open] div {
  opacity: 1;
  transform: translateY(0);
}

if you need more CSS style Code for the project do Comment below

here is a screenshot of the Css code added in the Html code for better Ui of Expand and collapse.

You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

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

REFER CODE - Adrian Florescu

WRITTEN BY - Ragunathan S