How to create Toggle Panel using HTML and CSS (No JavaScript)?

If you want to display more information in a small space of a webpage, you want to use 'Toggle panel'. This way user only have to click on a link or a tab (based on your design) to display the information within that less space. The other pane will collapse automatically to give a toggle effect.

In this tutorial, we will learn how to create the effect in a HTML web page using only CSS. We will not use any JavaScript for this. Continue reading to learn more.

If you are a web developer, you may some time need to show/hide div panels to give a toggle effect. For example, if you have 2-3 panels on the page and based on user's choice you want to display one of them at a time, you can do so using the div panel along with CSS only.

Using JavaScript and jQuery you can also build such effects, but in this post we will proceed with CSS only, which is very light weight and will give a better performance in the rendering.

Let's say, we have four section div panels. All of them are placed inside a single div having id 'section'. Each one of those div has two div panels; one for panel-title (header) and the other for panel-body (content). Our target here is to show the content part of the section based on the header/title that the user clicks.

Here's the HTML code for your reference:

<div id='section' class='tab-pane active'>
    <div class='panel panel-default'>
        <div class='panel-heading'>
            <h3 class='panel-title'><a href='#Section1'>Section 1</a></h3>
        </div>
        <div class='panel-body' id='Section1'>
            This is the content of 'Section 1'
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'>
            <h3 class='panel-title'><a href='#Section2'>Section 2</a></h3>
        </div>
        <div class='panel-body' id='Section2'>
            This is the content of 'Section 2'
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'>
            <h3 class='panel-title'><a href='#Section3'>Section 3</a></h3>
        </div>
        <div class='panel-body' id='Section3'>
            This is the content of 'Section 3'
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'>
            <h3 class='panel-title'><a href='#Section4'>Section 4</a></h3>
        </div>
        <div class='panel-body' id='Section4'>
            This is the content of 'Section 4'
        </div>
    </div>
</div>

Now, once the HTML code is ready, our next job is to write the CSS to add the toggle effect to those div panels. It's just two lines of code that you need to put. Here's our CSS for this effect:

<style>
    #section > .panel > .panel-body { display: none; }
    #section > .panel > .panel-body:target { display: block; }
</style>

Below is the demo for you to refer. Click on each one of the section title to see the content that we specified above in the HTML code.

I hope that the post was helpful. You will now be able to create toggle panel on your site/web page. Try this and let me know how it goes. If you have any queries, do let me know below in the comments section. I will try to answer you as soon as possible.