I am currently using collapsible content from Bootstrap and I am encountering an issue with the icon not changing when I click on the collapsible-header background. Here is a visual representation of the problem:
Upon clicking on the collapsible-header background, the lists collapse but the icon remains unchanged. I would like the icon to change along with the background upon clicking. However, if I click on the icon itself, it changes to a plus sign and collapses the contents as expected.
I want the collapsible header background to be responsive along with the icon. Unfortunately, the provided sample code does not visualize this properly. Please see below for the code snippet:
<div class="col-md-12" style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<span class="pull-left"><h3>Categories</h3></span>
<span class="pull-right">
<a href="#catehide1" class="catehide2" id="catehide1"><i class="zmdi zmdi-plus"></i></a>
<a href="#cateshow1" class="cateshow2" id="cateshow1"><i class="zmdi zmdi-minus"></i></a>
</span>
</div>
<div class="collapsible-body">
<ul class="collapsible-list">
<li><a href="www.sample1.com">Sample 1</a></li>
<li><a href="www.sample1.com">Sample 2</a></li>
<li><a href="www.sample1.com">Sample 3</a></li>
<li><a href="www.sample1.com">Sample 4</a></li>
<li><a href="www.sample1.com">Sample 5</a></li>
<li><a href="www.sample1.com">Sample 6</a></li>
<li><a href="www.sample1.com">Sample 7</a></li>
<li><a href="www.sample1.com">Sample 8</a></li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>
Here is the CSS section related to this issue:
.catehide2, .cateshow2 {
float: right;
font-size: 20px;
color: #000000;
text-align: center;
padding: 0;
}
.catehide2:hover, .cateshow2:hover {
color: #9e9e9e;
text-decoration: none;
opacity: 1;
}
.categorybox1 ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
height: auto;
font-family: 'Roboto', sans-serif;
font-weight: 450;
font-size: 15px;
color: #424242;
border: 0;
}
/* Additional CSS rules... */