ADVERTISEMENT

Expand Collapse Using Simple HTML Code Only

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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

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.

ADVERTISEMENT

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

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

ADVERTISEMENT

Do you use any external links to create this project?

No!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT