Expand Collapse Using Simple HTML Code Only

Expand Collapse Using Simple HTML Only

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Expand Collapse Using Simple HTML Only.

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

So,  Let’s Begin Our Text Over Video Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

 

HTML CODE For Expand 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. 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.

 

FINAL OUTPUT – Expand / Collapse

Now We have Successfully created our Expand Collapse Project using Simple HTML Code Only. 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+ 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.

REFER CODE – Adrian Florescu

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment