How to change Images with JavaScript?

Question

I have an accordion that works and only one image at a time can be open. The arrow starts with down but if you click it, the icon changes to up. I tried to make it with images because I don't like the possible icons. The thing is my JavaScript worked for icons but, after trying, I don't get how to use it with images. I tried two images of mine that showed up. flip-up and flip-down.

My jQuery

jQuery(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
        if($("i",this).hasClass('fa-chevron-circle-down')){
            $(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
            $("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up");
        }
        else{
            $("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
        }
    });
});

and the HTML

<div class="flip shadow-box col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder">
    <i class="fa fa-chevron-circle-down"></i>
</div>

Have you tried .attr('src', 'your-image-here.png') on your image element? — rybo111
– rybo111, Commented Aug 4, 2015 at 11:49
@rybo111 is not an image element, is a font awesome icon (with fonts) — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Aug 4, 2015 at 12:09
If you want to replace the arrows, why not change the class for the font awesome icons? Instead of using fa-chevron-circle-down, use another class for whatever glyphicon you want to use. Alternatively, defined your own glyphs for the icon and use a custom class (or custom classes that you toggle in between). — Terry
– Terry, Commented Aug 4, 2015 at 12:10

Marcos Pérez Gude · Accepted Answer · 2015-08-04 12:11:48Z

1

You can make it with javascript (replacing fa elements with your image tag), or you can workaround and override with pure css:

  .fa.fa-chevron-circle-down {
      content: "";
      background: url(assets/img/down.png) center center no-repeat;
  }
  .fa.fa-chevron-circle-up {
      content: "";
      background: url(assets/img/up.png) center center no-repeat;
  }

Be carefull with the size of the images. fa items has the size depending on the font size. You can especify width and height in the css to avoid problems.

Note: this solution is without edit your javascript code.

answered Aug 4, 2015 at 12:11

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change Images with JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related