How to change or toggle image onClick ?

Take two different images to toggle.
we can achieve this functionality by using javascript or by jQuery.

HTML-

<img src="images/arrow-up.png" onclick="hide_f(this)" style="display:none;" class="class_1" id="minus_2" />

<img src="images/arrow-down.png" onclick="show_f(this)" class="class_1" id="plus_2" />

Javascript-

Using function names-

function show_f(ele) {

document.getElementById("minus_2").style.display = "block";
document.getElementById("plus_2").style.display = "none";
}

function hide_f(elem) {
var id2 = elem.id;
document.getElementById("minus_2").style.display = "none";
document.getElementById("plus_2").style.display = "block";
}

jQuery-

Using jQuery functions-

jQuery(function ($) {
        $(document).ready(function(){
   $("#plus_2, #minus_2").click(function(){
    $("#minus_2, #plus_2").toggle();
   });
 });
});