Expand Collapse Using Simple HTML Code

Expand/Collapse Using HTML Code Only

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
Expand/Collapse Using HTML Code


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

50+ HTML, CSS & JavaScript Projects With Source Code

Code byAdrian Florescu
Project DownloadLink Available Below
Language usedHTML
External link / DependenciesNo
Expand Collapse Code Table

Html Code For Expand And Collapse:-

<div class="container">

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

    <summary>Contact Info</summary>
      <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>

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


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

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

Expand/collapse Html Css Output:-

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

expand/collapse html code

Expand/Collapse Using HTML Code

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

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


Which code editor do you use for this Expand Collapse coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.


is this project responsive or not?

YES! this is a responsive project


Do you use any external links to create this project?



Leave a Reply