backslash backslash - 2 months ago 13
CSS Question

Accordian collapse menu side icon change when expand

This is menu with collapse menu. I want to make it right side icon change when expand menu.

i want to add

<i class="fa fa-caret-down pull-right"></i>
in this code
fa-caret-down
icon when click
fa-caret-up




.category-list {
width="100px";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="category-list" id="category-list">
<div class="list-name" data-toggle="collapse" data-target="#all">All
<i class="fa fa-caret-down pull-right"></i>
</div>

<ul id="all" class="collapse">
<li><a href="">Test1</a>
</li>
<li><a href="">Test2</a>
</li>
<li><a href="">Test3</a>
</li>
<li><a href="">Test4</a>
</li>
<li><a href="">Test5</a>
</li>
<li><a href="">Test6</a>
</li>
<li><a href="">Test7</a>
</li>
<li><a href="">Test8</a>
</li>
</ul>


</div>
</div>
</div>
</div>




Answer

Insert the .fa-caret-up element and place the appropriate css rules to show or hide the carets based on .list-name element's aria-expanded attribute's state:

  1. When aria-expanded="true" : Only the .fa-caret-up icon will be visible
  2. When aria-expanded="false" : Only the .fa-caret-down icon will be visible

.category-list {
  width="100px";
}

.list-name:not([aria-expanded="true"]) .fa.fa-caret-up,
.list-name[aria-expanded="false"] .fa.fa-caret-up,
.list-name[aria-expanded="true"] .fa.fa-caret-down {
   display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<div class="row">
<div class="col-xs-3">  
<div class="category-list" id="category-list">
  <div class="list-name" data-toggle="collapse" data-target="#all">All
    <i class="fa fa-caret-down pull-right"></i>
    <i class="fa fa-caret-up pull-right"></i>
  </div>

  <ul id="all" class="collapse">
    <li><a href="">Test1</a>
    </li>
    <li><a href="">Test2</a>
    </li>
    <li><a href="">Test3</a>
    </li>
    <li><a href="">Test4</a>
    </li>
    <li><a href="">Test5</a>
    </li>
    <li><a href="">Test6</a>
    </li>
    <li><a href="">Test7</a>
    </li>
    <li><a href="">Test8</a>
    </li>
  </ul>


</div>
  </div>
</div>
  </div>

Comments