Liquid expandable section with rounded corners using CSS

A simple tutorial to apply sliding doors technique to expandable HTML sections with rounded corners.

This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.


You can reuse it in your project changing the colors and the size of section header and of the section body or more in general all you want.
Live preview Download this tutorial


Step 1: HTML code
The section I want to design has a header and a body. Our final result is something like this:


To design the header we can use a <h2> tag and for the body a DIV layer with class attribute set to"section":

<h2><span><a href="#" onclick="expandSection('section1')">My Section</a></span></h2>
<div id="section1" class="section">
<span>
... add some text, images, links...
</span>
</div>

The link call a JavaScript function expandSection() which expande / contract the section body. If you have more than one section in your page you can modify each section body ID with a progressive number (section1, section2, section3...) to identify the element to expand / contract when you click on the section header of the same section.

To add rounded corners which fit automatically with the section width you can use this simple tricks I already used in this previous post:

You have simply add a <span> tag inside the <h2> element or more in general inside a container element (div, p, h1...). Then you have to apply a rounded image to the CSS background attribute of the container element (top-left corner) and another image to the CSS background attribute of the inner <span> element (top-right corner).

Step 2: CSS code
CSS code is very simple and you can modify it to adapt this tutorial to your requirements:

// Reset h2 default style
h2{ margin:0px;
padding:0px;
border:0px; }

h2{ color:#FFFFFF;
font-size:13px;
display:block;
background:url(img/h2_bg.gif) top left no-repeat #9A9A9A; }

h2 span{
padding:5px 10px;
background:url(img/h2_span_bg.gif) top right no-repeat;
display:block;
}

h2 a:link, h2 a:visited{
color:#FFFFFF;
text-decoration:none;
display:block; }

div.section {
background:url(img/section_bg_left.png) bottom left no-repeat #EEEEEE;
font-size:12px; }

div.section span{
background:url(img/section_bg_right.png) bottom right no-repeat;
padding:10px;
display:block; }

Background attribute for h2, h2 span, section, section span contains an image which is the rounded corner (respective top-left, top-right, bottom-left, bottom-right) for our section.

Step 3: JavaScript function to expand/contract the section body
This is the code for the function expandSection() we have already seen at this post. This function get as parameter in input the ID of the HTML element you want to expand/contract (in our case section1).

<script type="text/javascript">
function expandSection(id){
var mySection = document.getElementById(id);
if(mySection.style.display=="none"){
mySection.style.display="block";
} else {
mySection.style.display="none";
} }
</script>

...the ID of the element is passed to te function from the following link in the Step 1 (in this case "section1"):

<a href="#" onclick="expandSection('section1')">

It's all! Download this tutorial and try it!

Download this tutorial