Jquery switch image, but remember the last image

Question

Im programming a menu for mobile devices on my web site. When the user clicks arrow down image the sub menu appears and the image changes to arrow up.

However, when the user clicks on arrow up the image should be changed back to arrow down.

My script so far:

<!-- Hide show nav -->
<script>
    $(document).ready(function(){
        $(".show_hide_main_sub_menu").click(function () {
            $("#main_sub_menu").toggle();
            $(".show_hide_main_sub_menu").attr('src',"../_webdesign/images/main/arrow_up.png");
        });
    });
</script>
<!-- //Hide show nav -->

<a href="#"><img src="../_webdesign/images/main/arrow_down.png" alt="arrow_down.png" class="show_hide_main_sub_menu" /></a>

Can anyone point me in the right direction please?

The first answer was correct, you should just toggle class with js and use css to change the image (or orientation as below). — Levidps, Jan 24 '18 at 20:33

Kristian · Answer 1 · 2018-01-25T07:51:20.980

DO NOT REPLACE THE SOURCE

Possible solution is to not replace the image, but just rotate the ellement with CSS: transform: rotate(180deg); as a reference for jQuery solution please see this post. If you use css transition like: transition: all 0.3s ease-in-out; you get nice smooth effect without nasty blinking which you get while changing the source. For optimal user experience you might also get rid of png file and rather use svg pictogram since it scales better and is of a smaller size.

PURE CSS

It also might be worth noting that the both effect and the user interaction can be easily accomplished by pure css. As can be seen at this codepen example and many other places over the internet (just search for it). Reducing jQuery to a minimum is always welcomed practice. Having UI graphic features covered mostly by CSS is also helpful. This way you can optimise your page better. If the DOM structure and CSS are well designed, you can even achieve faster loading/render, make it more consistent across wide range of browsers and get rid of the issues related to dealing with clients without JS or using interfering browser plugins or cases when jQuery scripts are not loaded and initialised properly on client (ie due to bad communication with the server).

score 0 · Answer 2 · answered Jan 24 '18 at 20:57

You could try assigning the img src using a class, and transitioning based on the class.

For instance:

<a href="#" id="clickable"><div class="show_hide_main_sub_menu down_arrow"></div></a>

$(document).ready(function() {
    $("#clickable").click(function() {
        var target = $(this).children(".show_hide_main_sub_menu");
        if (target.hasClass("down_arrow")) {
            target.removeClass("down_arrow");
            target.addClass("up_arrow");
        } else if (target.hasClass("up_arrow")) {
            target.removeClass("up_arrow");
            target.addClass("down_arrow");
        }
    })
})

.down_arrow {
    background-image:url('https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}
.up_arrow {
    background-
    image:url('https://cdn.pixabay.com/photo/2013/07/13/09/50/arrow-156118_960_720.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}

Check this fiddle

score -1 · Accepted Answer · answered Jan 24 '18 at 20:29

You can check the src attribute for its current value, and change it (and the alt attribute) based on the result.

$(document).ready(function() {
  $(".show_hide_main_sub_menu").click(function() {
    $("#main_sub_menu").toggle();
    if ($(".show_hide_main_sub_menu").attr('src') === "../_webdesign/images/main/arrow_down.png") {
      $(".show_hide_main_sub_menu").attr('src', "../_webdesign/images/main/arrow_up.png").attr('alt', 'arrow_up.png');
    } else {
      $(".show_hide_main_sub_menu").attr('src', "../_webdesign/images/main/arrow_down.png").attr('alt', 'arrow_down.png');
    }
  });
});

Jquery switch image, but remember the last image

3 Answers3