CSS Accordion IE10 Fix
Published September 26, 2017 | Categories: Web Development
You can create accordions for your site using CSS and the input button method. The only caveat is that if you need to make the accordion row titles clickable in IE10 you have to add the labels method. With these few simple steps below, you will have clickable accordion row titles that also works in IE10.
Download the CSS Accordion IE10 Fix. You can also find all the needed information at the original source below.
Example below. You can change the HTML Class, ID names and CSS styles, as needed. Please note that each accordion row will need a unique label ID, Name and For Tag.
HTML
<div class="accordion">
<div>
<input id="ac-1" name="accordion-1" type="checkbox"/>
<label for="ac-1">About</label>
<div class="article ac-small">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox"/>
<label for="ac-2">Resume</label>
<div class="article ac-medium">
<p>Pellentesque habitant morbi tristique senectus et netus et egestas. Vestibulum tortor quam, feugiat vitae...</p>
</div>
</div>
</div>.accordion {
width: 400px;
margin: 10px auto;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);
}
.accordion label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: 30px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion label:hover {
background: #F3F3F3;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
background: #CDECC5;
color: #3d7489;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
display: none;
}
.accordion .article {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .article p {
font-style: italic;color: #777;line-height: 23px;font-size: 14px;padding: 20px;
}
.accordion input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .article.ac-small {
height: 155px;
}
.accordion input:checked ~ .article.ac-medium{
height: 195px;
}
.accordion input:checked ~ .article.ac-large{
height: 245px;
}Sources: Brad S. Knutson
Recent Posts
