How to create an accordion in CSS
Creating an accordion in CSS without using javascript/jQuery is not frequently occurring but nonetheless it is possible and besides not so difficult at all. First of all an unordered list in HTML needs to be created which can be styled via the CSS. To display and move the list as an accordion we make use of the CSS :hover property which will display the content right behind the titles.
First, we'll need some basic HTML:
<ul class="accordion">
<li>
<h2>First tab</h2>
<div class="tab-content">
<span>Tab one:</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<h2>Second tab</h2>
<div class="tab-content">
<span>Tab two:</span> Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<h2>Third tab</h2>
<div class="tab-content">
<span>Tab three:</span> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<h2>Fourth tab</h2>
<div class="tab-content">
<span>Tab four:</span> Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
<ul class="accordion">
<li>
<h2>First tab</h2>
<div class="tab-content">
<span>Tab one:</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<h2>Second tab</h2>
<div class="tab-content">
<span>Tab two:</span> Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<h2>Third tab</h2>
<div class="tab-content">
<span>Tab three:</span> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
<li>
<h2>Fourth tab</h2>
<div class="tab-content">
<span>Tab four:</span> Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
Then we create the accordion behaviour using CSS:
.accordion{
width: 30%;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #d8d000;
border-bottom: none;
}
.accordion h2{
font-size: 16px;
text-align: center;
margin: 0px;
padding: 5px;
background: #fffc9f;
border-bottom: 1px solid #d8d000;
}
.accordion li .tab-content{
display: none;
padding: 5px;
background: #fefdd9;
border-bottom: 1px solid #d8d000;
}
.accordion li:hover .tab-content{
display: inherit;
}
.tab-content span{
font-weight: bold;
font-size: 18px;
text-decoration: underline;
}
Live Demo?blank
.accordion{
width: 30%;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #d8d000;
border-bottom: none;
}
.accordion h2{
font-size: 16px;
text-align: center;
margin: 0px;
padding: 5px;
background: #fffc9f;
border-bottom: 1px solid #d8d000;
}
.accordion li .tab-content{
display: none;
padding: 5px;
background: #fefdd9;
border-bottom: 1px solid #d8d000;
}
.accordion li:hover .tab-content{
display: inherit;
}
.tab-content span{
font-weight: bold;
font-size: 18px;
text-decoration: underline;
}