CSS Accordion

Useful for chapters

by Ovi Stof

HTML

<!--
	http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
	https://www.mraffaele.com/labs/css-only-accordions/
	https://ianlunn.github.io/Hover/
-->
<div class="acord">
    <ul>
        <li>
            <input type="radio" id="radio_1" name="radio_acord" checked="checked" />
            <label for="radio_1" class="hvr-rectangle-out hvr-icon-grow">Title&nbsp;One <i class="fa fa-chevron-down"></i></label>
            <div class="contin">
                <h3>This is an example accordion item</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="radio_2" name="radio_acord" />
            <label for="radio_2" class="hvr-rectangle-out hvr-icon-grow">Title&nbsp;Two <i class="fa fa-chevron-down hvr-icon"></i></label>
            <div class="contin">
                <h3>Totally another one left here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at....

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
:root {
	--tab_activ:Navy; /*#C02942;*/
	--tab_normal:DodgerBlue; /*#D95B43*/
	--cul_normal:White /*#542437*/
}
.acord {
    font-family:Arial, Helvetica, sans-serif; 
    margin:0 auto;
    font-size:14px;
    border:1px solid var(--tab_normal);
    border-radius:5px;
    width:98%;
    padding:2px;
    background:#fff;
}
.acord ul {list-style:none; margin:0; padding:0;}
.acord li {margin:0; padding:0;}
.acord [type=radio], .acord [type=checkbox] { display:none;}
.acord label {
    display:block;
    font-size:16px;
    line-height:16px;
    background:var(--tab_normal);
    border:1px dotted var(--tab_activ);
    color:var(--cul_normal);
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    font-weight:700;
    cursor:pointer;
	font-variant:small-caps;
	text-align:center;
   /* text-transform:uppercase;*/
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3s ease-out;
}
.acord ul li label:hover, .acord [type=radio]:checked ~ label, .acord [type=checkbox]:checked ~ label {
    background:var(--tab_activ);
    color:#FFF;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.acord .contin {
    padding:0 10px;
    overflow:hidden;
    border:1px solid #fff; /* Make the border match the background so it fades in nicely */
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.acord p {color:#333; margin:0 0 10px;}
.acord h3 { color:#542437; padding:0; margin:10px 0;}
/* Vertical */
.acord ul li { overflow:hidden; margin:0 0 1px;}
.acord ul li label {
	padding:10px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  }
.acord ul li label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:...