✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Toggle Panel Using HTML5 And CSS

Last Updated : Jul 1, 2023

IN - HTML5 CSS | Written & Updated By - Dikshita

In this tutorial we will show you how to create toggle panel using HTML5 and CSS, toggle panel is best to use if you want to display more information when you are going short in space in webpage user only have to click on summary and more information panel will open this way you can display more information using less space.

You may also like vertical accordion menu using jQuery and CSS.

Create Toggle Panel Using HTML5 And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Toggle Panel It Takes Only Two Steps:-

  1. Make a HTML file and define markup
  2. Make a CSS file and define styling

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name panel.html 

<html>
<head>
<link href="panel_style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">

<div id="panel_div">
<section>

<details open>
 <summary>Lorem ipsum dolor sit amet</summary>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla leo id mauris viverra, in egestas sapien tristique. Sed at ornare felis, quis rutrum nisi. Aenean cursus lacus ac eros sagittis pharetra. Nullam in pretium ligula. Donec ullamcorper eros non gravida tincidunt. Nullam nec nisi a tortor feugiat adipiscing id quis nisi. Vivamus et bibendum ligula.</p>
</details>

<details>
 <summary>Phasellus quis dui eu dolor</summary>
 <p>Phasellus quis dui eu dolor fringilla imperdiet. Curabitur iaculis metus a orci blandit volutpat. Nam imperdiet massa nec ipsum laoreet, ut pellentesque ante mattis. Aenean et tempus urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat vehicula odio. Nullam tristique dui eu augue semper, non posuere ipsum tristique.</p>
</details>

<details>
 <summary>Sed nisl odio, semper fermentum</summary>
 <p>Sed nisl odio, semper fermentum dui et, tincidunt laoreet justo. Maecenas a neque vitae libero iaculis sodales sed mollis risus. Phasellus velit nulla, sollicitudin id augue eget, laoreet rutrum enim. Mauris convallis pretium rutrum. Pellentesque ultrices nisi eu nulla ultrices, non vehicula purus suscipit.</p>
</details>

<details>
 <summary>Etiam auctor, tortor eu hendrerit</summary>>
 <p>Etiam auctor, tortor eu hendrerit scelerisque, orci leo aliquam enim, in cursus nunc metus sed ipsum. Fusce vel risus vitae odio auctor porttitor et non leo. Nullam congue, risus eu ultricies vehicula, purus erat sodales dolor, in semper nibh ligula eget odio. Curabitur vulputate consequat turpis eleifend tincidunt. Nullam auctor lacinia mauris eu lacinia. Nam a sem velit. Suspendisse potenti. Morbi risus diam, eleifend vel lectus quis, commodo adipiscing ipsum. Fusce at sagittis ipsum. Aliquam at ante id sem aliquam cursus.</p>
</details>

</section>
</div>

</div>
</body>
</html>

In this step we use HTML5 detail tag to create toggle panel. Under this detail tag there are two key components 'summary' and 'p', summary is the text displayed and 'p' is the text which is hidden user have to click on summary to see more text.

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name panel_style.css 

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#8A0829;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#F5A9BC;
}
#wrapper h1 p
{
 font-size:18px;
}
#panel_div
{
 width:500px;
 text-align:left;
 margin-left:245px;
}
details 
{
 margin: 5px;
 color:#8A0829;
}
details summary 
{
 border: 1px solid black;
 padding: 10px;
 background-color: #F7819F;
}
details p 
{
 margin: 1px !important;
 padding: 10px;
 border: 1px solid black;
 background-color: #F5A9BC;
}

That's all, this is how to create toggle panel using HTML5 and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on toggle panel css helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →