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.👇

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

50+ HTML, CSS & JavaScript Projects With Source Code

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.

Restaurant Website Using HTML and CSS

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.

Final Output Expand/Collapse Using HTML Code:-

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:-

.container {
  margin: 20px auto;
  max-width: 600px;
  padding: 20px 0;
  background-color: #f7f5f8;
  border-radius: 10px;
  }

details {
  margin-bottom: 20px;
}

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

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);
}

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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