Cross Browser Pure CSS3 Horizontal Accordion

Just few days ago, I shared pure CSS3 vertical accordion that works in all modern browsers, including Internet Explorer. Now it is time to share its twin – a pure CSS3 horizontal accordion. It uses same markup enabling you to switch from vertical to horizontal accordion and vice versa by simply changing the class name.

We will continue to use “:hover” instead of “:target” pseudo class to cater Internet Explorer and other usability issues (You should read “Cross Browser Pure CSS3 Vertical Accordion” article to find out why we are not using “:target” pseudo class).

Lets Start

In order to support text based panel heads, we will need to rotate entire panel head to create horizontal accordion. Interestingly, we have the ability to rotate elements in Internet Explorer (using Microsoft’s BasicImage filter) for a while. Other browsers are only able to do this with CSS3 transform. Rest of the structure and behavior will be written in cross-browser CSS that will work in IE7+ and all other modern browsers.

View Demo Now Download Files

01 <div class="horizontalaccordion">
02 <ul>
03 <li>
04 <h3>Heading 1</h3>
05 <div>Content For Panel 1.</div>
06 </li>
07 <li>
08 <h3>Heading 2</h3>
09 <div>Content For Panel 2</div>
10 </li>
11 <li>
12 <h3>Heading 3</h3>
13 <div>Content For Panel 3.</div>
14 </li>
15 <li>
16 <h3>Heading 4</h3>
17 <div>Content For Panel 4</div>
18 </li>
19 </ul>
20 </div>
01 .horizontalaccordion>ul>li:hover {
02 overflow: hidden;
03 width: 380px;
04 }
05
06 .horizontalaccordion:hover>ul>li:hover>div {
07 display:block;
08 }
09
10 .horizontalaccordion:hover>ul>li:hover>h3 {
11 /* Decorative CSS */
12 color:#fff;
13 background:#000000;
14 }
15
16 .horizontalaccordion>ul>li>h3:hover {
17 cursor:pointer;
18 }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: