How to change to icon-bar to a new image when clicked via jquary

[zervas]

I'm trying to change the icon-bar class to a new image when a click event happens

Jquery code:

$('#icon_bar_image').click(function(){
       $(this).toggleClass('changeIconBar');  
       });

CSS code:

img.changeIconBar {
background-image: url(../images/collapse_up.png) !important;
width: 50px !important;
height: 50px !important;
}

html code:

<nav class="navbar navbar-inverse">
<div class="container-fluid background-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-bar">
<img src="images/icon_bar_close.png" id="icon_bar_image" width="50" height="50">
</button>

it doesn't work. Does anyone know how I can change an image when a click event happens ?

thank you in advance for your time.

[zervas]

I tried the following code

$('.navbar-toggle').click(function(){


       $("#icon_bar_image").css("background-image","url(../images/collapse_up.png)");

       });

When a user clicks on navbar-toggle then change the image of the icon-bar, but it doesn't work as well. In case you have any ideas , you are welcome to post

[morency]

 
 $('.navbar-toggle').on({     'click': function(){         $('#icon_bar_image').attr('src','collapse_up.jpg');     } });

maybe post an jsfiddle here so we can look