Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development In Your Email

Create Toggle Panel Using HTML5 And CSS

Tuesday, Jan 24, 2017

Tags:- HTML5 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.In this tutorial we will show you how to create toggle panel using HTML5 and CSS.You may also like vertical accordion menu using jQuery and CSS.


See Demo
Create Toggle Panel Using HTML5 And CSS


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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email