In today’s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3. There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won’t work correctly. If your accordion is purely in CSS then it will work for all your visitors.
We are going to create a horizontal and vertical content accordion. On clicking the headline text the slide will open displaying the full content, and here’s a quick preview (screenshots) how they look like.
Like what you see? Let the coding begin!
1. Preparing HTML and Content
To start with we are going to create the HTML for the accordion.
The structure needs a container div and then have a section for each slide in the accordion. In this example we are going to have 5 slides. Each of the slides are going to have a title and a paragraph for the content.
<div class="accordion horizontal">
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
<section>
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
</div>
Now we have our slides we can begin to style the accordion.
2. CSS Styling
First we need to style the containing div of the accordion. This will give us an idea of how to display each of the slides and each of the headlines.
/*Define Accordion box*/
.accordion {
width:830px;
overflow:hidden;
margin:10px auto;
color:#474747;
background:#414141;
padding:10px;
}
Next we are going to create the headlines for each of the slides.
.accordion section{
float:left;
overflow:hidden;
color:#333;
cursor:pointer;
background: #333;
margin:3px;
}
.accordion section:hover {
background:#444;
}
We are setting the background color to be dark grey on the section to be the headline where the visitors will click to display the slide. We are using this section for both the headline and the content which means we are able to use less HTML and reuse the title of the slide as the headline of the content.
.accordion section p {
display:none;
}
At the moment all the slides will be closed so we need to make sure that the paragraph is hidden from view until the slide is open, so for now set the display of the paragraph to none.
.accordion section:after{
position:relative;
font-size:24px;
color:#000;
font-weight:bold;
}
.accordion section:nth-child(1):after{ content:'1'; }
.accordion section:nth-child(2):after{ content:'2'; }
.accordion section:nth-child(3):after{ content:'3'; }
.accordion section:nth-child(4):after{ content:'4'; }
.accordion section:nth-child(5):after{ content:'5'; }
With the slides closed we want to display a number at the bottom of the headline to say which number slide we are on. For this we are going to use CSS to add content after the section headline, this can be done by using the :after pseudo-class selector.
Now we have created the headline for the slide we can make the click event to display the slide in the accordion. But there is a problem, CSS doesn’t have a click event, which is why the accordion is normally created by using jQuery so we can attach a click event to the headline text.
We need to mimic the click event in CSS which can be done by using the :target pseudo-class selector.
3. Using :target pseudo-class Selector
:target allows us to style the fragment identifier. Sometimes we use an on-page anchor tag to point to a place on the page. On clicking the link the id in the anchor tag becomes the target and you can style this by using the :target selector.
To add this into the accordion we need to add a link around the headline pointing to an id of the slide.
<section id="about">
<h2><a href="#about">About Us</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</section>
.accordion section:target {
background:#FFF;
padding:10px;
}
.accordion section:target:hover {
background:#FFF;
}
.accordion section:target h2 {
width:100%;
}
.accordion section:target h2 a{
color:#333;
padding:0;
}
.accordion section:target p {
display:block;
}
.accordion section h2 a{
padding:8px 10px;
display:block;
font-size:16px;
font-weight:normal;
color:#eee;
text-decoration:none;
}
The above code will change the size of the slide to fit the rest of the accordion and changes the background color to white. The paragraph was hidden so now on target we need to display the paragraph.
Now when you click on the headline of the accordion the slide will change style to display the content of the slide.
4. Horizontal Accordion
The above code will create the general accordion now we can start to make the CSS changes for the differences between the horizontal and vertical accordion. Both these accordions have the same functionality but the headline styling would be different.
.horizontal section{
width:5%;
height:250px;
-moz-transition: width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
First we set the width of the headline section to 5% so it is a closed slide. As the section is both the headline and the content for the slide we need to add the animation to display the content by using the transition property.
/*Position the number of the slide*/
.horizontal section:after{
top:140px;
left:15px;
}
The position of the number on the slide will be the same position on each closed headline these are positioned differently to the vertical headlines.
/*Header of closed slide*/
.horizontal section h2 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width:240px;
position:relative;
left:-100px;
top:85px;
}
/*On mouse over open slide*/
.horizontal :target{
width:73%;
height:230px;
}
.horizontal :target h2{
top:0px;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
The above code will change the size of the slide to fit the rest of the accordion. The headline was rotated vertically to run down the headline but now with the slide open we need to change the text back to be horizontal by rotating the text back to 0 degrees.
5. Vertical Accordion
The vertical accordion works the same way as the horizontal accordion except we need to change the height instead of the width and we don’t need to change the alignment of the text.
.vertical section{
width:100%;
height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{
height:250px;
width:97%;
}
On the target event of the vertical accordion we are going to change the height of the headline to display the slide.
.vertical section h2 {
position:relative;
left:0;
top:-15px;
}
/*Set position of the number on the slide*/
.vertical section:after{
top:-60px;
left:810px;
}
.vertical section:target:after{
left:-9999px;
}
The above will change the position of the headline text on the closed slide. With the closed slide we need to set the position of the number which is located on the right of the accordion. When the slide is open we need to hide this number on headline when the target is set so we change the left position off the screen.
Now when you click on the headline of the accordion the slide will change style to display the content of the slide.
Demo & Download
View the demo to see this code in action or download the files to see how it’s all put together, or download the file and browse them offline.
