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

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

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

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

    Jquery code:
    Code:
    $('#icon_bar_image').click(function(){
           $(this).toggleClass('changeIconBar');  
           });
    CSS code:

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

    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.

  • #2
    I tried the following code

    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

    Comment


    • #3
      Code:
       
       $('.navbar-toggle').on({     'click': function(){         $('#icon_bar_image').attr('src','collapse_up.jpg');     } });
      maybe post an jsfiddle here so we can look

      Comment

      Working...
      X