CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
prak24
prak24

Reputation: 59

Change Icons On Expansion And Collapse

So I have a side bar menu in which I am trying to allow the user to navigate through all of the categories which is a tree like structure. I am facing problems with Expansion and collapse of the menu. I want the icon-expand icon to be become icon-collapse icon when the menu is expanded. HTML doesn't allow if statements as it is not a programming language. How can I perform the task?

Here is my code

.coll { background-image: url("images/icon-collapse.png"); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFnIdc-Cqv0YKz7_fKBSJhgqp-VaBtSK0yfmPZn7pBVuMr07zM" data-toggle="collapse" href="#collapse1" class="collapsed" aria-expanded="false" style="
    width: 27px;
"><a href="audits-inspections-surveys.php">Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
  </div>
  </div>
  <div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <span class="coll" data-toggle="collapse" href="#collapse2"></span><a href="audits-inspections-surveys.php">Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
    </div>
   </div>
   </div>
    </div>

Upvotes: 1

Views: 11346

Answers (3)

Mehdi Bouzidi
Mehdi Bouzidi

Reputation: 1985

ONLINE ICONS

First of all I invite you to not work with images to add icon but work with web icons, such as: Fontawesome / Glyphicon;

And it's pretty easy to use those icons, in this case I will use Fontawesome & here an example:

<script src="https://use.fontawesome.com/c6435311fd.js"></script>
<i class="fa fa-angle-down"></i>

YOUR ISSUE

Now we'll go back to your issue:

  1. Instead of this code

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFnIdc-Cqv0YKz7_fKBSJhgqp-VaBtSK0yfmPZn7pBVuMr07zM" datatoggle="collapse"href="#collapse1" class="collapsed" aria-expanded="false" style="width: 27px;"/>

I'll use this one:

<i class="fa fa-angle-down" data-toggle="collapse" href="#collapse1" class="collapsed" aria-expanded="false"></i>

  1. Then I have just to switch between the classes fa-angle-down & fa-angle-up when you click on it, using this jQuery code:

    $(".fa").on("click",function(){ $(this).toggleClass("fa-angle-down"); $(this).toggleClass("fa-angle-up"); });

  1. Here is a demo that you can run:

Click on the arrow not on the link, cause i don't know why your link is not working, but when you click on the click you'll get the expected effect !

$(".fa").on("click",function(){
$(this).toggleClass("fa-angle-down");
$(this).toggleClass("fa-angle-up");
});
.coll { background-image: url("images/icon-collapse.png"); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/c6435311fd.js"></script>

<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
     <a href="audits-inspections-surveys.php"><i class="fa fa-angle-down" data-toggle="collapse" href="#collapse1" class="collapsed" aria-expanded="false"></i>Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
  </div>
  </div>
  <div class="panel-group">
 <div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <span class="coll" data-toggle="collapse" href="#collapse2"></span><a href="audits-inspections-surveys.php">Collapsible panel</a>
    </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Panel Body</div>
    <div class="panel-footer">Panel Footer</div>
    </div>
   </div>
   </div>
    </div>

Upvotes: 2

Alexandru Cojan
Alexandru Cojan

Reputation: 206

You can use toggleClass from jQuery or implement similar behavior using vanilla js.

Upvotes: 0

Виктор Иванов
Виктор Иванов

Reputation: 347

You can use jQuery since you already have it included.

HTML:

<!-- add on onclick JS function and pass the img element to it -->
<img onclick="changeIcon(this);" src="images/icon-expand.png" data-toggle="collapse" href="#collapse1"><a ....

.

JS:

<script>
function changeIcon(theImage)
{
  var expand = 'images/icon-expand.png';
  var collapse = 'images/icon-collapse.png';
  var thePic = $(theImage).attr('src'); // use jQuery to get the current image

  // now set the src attribute according to its current state
  if(thePic==expand){ $(theImage).attr('src',collapse); }
  if(thePic==collapse){ $(theImage).attr('src', expand); }
}
</script>

Hope this works for you :)

Upvotes: 0

Related Questions