Toggle accordion Glyph Icon with CSS only
You can solve this using :not(checked)
and checked
CSS pseudo-classes.
- not()
- checked
Remove this part
.accordion-bral input:checked ~ .ac-label i:before {
transform: translate(2px, 0) rotate(-45deg);
}
.accordion-bral input:checked ~ .ac-label i:after {
transform: translate(-2px, 0) rotate(45deg);
}
.accordion-bral i:before, .accordion-bral i:after {
content: "";
position: absolute;
background-color: #808080;
width: 3px;
height: 9px;
}
.accordion-bral i:before {
transform: translate(-2px, 0) rotate(-45deg);
}
.accordion-bral i:after {
transform: translate(2px, 0) rotate(45deg);
}
Use the glyphicon
source code and then use this code.
/* when input is checked */
.accordion-bral input:checked ~ .ac-label i:after {
content: "\e114"
}
/* when input is not checked */
.accordion-bral input:not(checked) ~ .ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal; /* change font style too */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey;
}
http://jsfiddle.net/7zsbumax/2/
.accordion-bral {
min-height: 0;
min-width: 220px;
width: 100%;
height: 100%;
background-color: #FFF;
margin: 0px!important;
}
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral .ac-label:hover {
background: #b70000;
color: white;
}
.accordion-bral input+.ac-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-bral input:checked+.ac-label,
.accordion-bral input:checked+.ac-label:active {
background-color: #b70000;
color: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion-bral input.ac-input {
display: none;
}
.accordion-bral .article {
background: white;
overflow: hidden;
height: 20px;
max-height: auto;
-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-bral .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion-bral input:checked~.article i {
-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-bral input:checked~.article.ac-content {
height: auto;
}
.accordion-bral i {
text-decoration: none;
margin-top: 16px;
right: 0;
}
.accordion-bral input:checked~.ac-label i:after {
content: "\e114"
}
.accordion-bral input:not(checked)~.ac-label i:after {
content: "\e080";
}
.accordion-bral i:after {
font-style: normal;
font-family: 'Glyphicons Halflings';
/* essential for enabling glyphicon */
content: "\e114";
/* adjust as needed, taken from bootstrap.css */
float: right;
/* adjust as needed */
color: grey;
}
ul.ac-list {
padding-left: 40px;
list-style-type: disc;
}
table.ac-table {
margin: 20px 0 20px 20px;
}
table.ac-table th {
text-align: left;
}
@media (max-width: 550px) {
.accordion-bral .ac-label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: auto;
padding-right: 40px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion-bral i {
position: absolute;
transform: translate(-30px, 0);
margin-top: 2%;
right: 0;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div class="accordion-bral">
<div>
<!-- accordion item 1 -- start -->
<input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
<label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
<div class="article ac-content">
<h1 style="position: absolute; margin-left:10px;color:#b70000;">HOUTSOORT</h1>
<div class="flex-container">
<div class="card">
<img src="maxopdracht2/eiken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Eiken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/beuken-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Beuken</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/grenen-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Grenen</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/maple-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Maple</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/merbau-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Merbau</label>
</div>
</div>
<div class="card">
<img src="maxopdracht2/onbekend-vloer.jpg" style="width:100%">
<div>
<input id="checkbox-1" class="checkbox-custom" style="" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">Overig/onbekend</label>
</div>
</div>
</div>
</div>
</div>
<!-- accordion item 1 -- end -->
<div>
<!-- accordion item 2 -- start -->
<input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-2">responsive accordion<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 2 -- end -->
<div>
<!-- accordion item 3 -- start -->
<input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
<div class="article ac-content">
</div>
</div>
<!-- accordion item 3 -- end -->
<div>
<!-- accordion item 4 -- start -->
<input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
<label class="ac-label" for="ac-4">Forms are cool<i></i></label>
<div class="article ac-content">
</div>
</div>
</div>
Update
If you want a little animation use this:
.accordion-bral input:checked ~ .ac-label i:after {
/* transform: rotate(90deg); */
transform: rotate(-270deg);
}
.accordion-bral i:after {
content: "\e080";
font-style: normal;
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
float: right; /* adjust as needed */
color: grey;
transition: 1s ease-out;
}
http://jsfiddle.net/2eLb3ju7/