SVG hamburger menu: how can I change its color every time I clicked it?

Question

I am aware this is a pretty newbie question but I can't figure out a solution on my own.

I have the following SVG hamburger-menu icon:

    <svg class="svg-menu" style="margin-top: 1.8rem;margin-right:0.5rem" viewBox="0 0 100 80" width="40" height="18" onclick='fill:red'>>
<rect id="r1" width="100" height="8"></rect>
<rect id="r2" y="30" width="100" height="8"></rect>
<rect id="r3" y="60" width="100" height="8"></rect>
</svg>

At the moment, I can change its color when I click on it by running the following function:

enter code here

$(function(){
          $(".svg-menu").on("click",function(){
          $("#r1,#r2,#r3").attr("fill","#C8C8C8");   
            });
    });

enter code here

I am unable to figure out how to revert the original color back after clicking on it again (to be clear: on the first click, it changes its color and the menu appears, on the second click the menu disappears but the color remains the same).

Any lead would be greatly appreciated!

Thanks

score 0 · Answer 1 · answered Nov 06 '20 at 12:51

Well, there was a similar question on StackOverflow in the past. I did a small edit on it, it seems working this way:

    let clickNumbers = 0;
    $(function(){
$(".svg-menu").on("click",function(){
        clickNumbers++;
        if(clickNumbers % 2 == 1){
    $("#r1,#r2,#r3").attr("fill","#C8C8C8");
        } else {
            $("#r1,#r2,#r3").attr("fill","#000");
        }
        });
        });

SVG hamburger menu: how can I change its color every time I clicked it?

1 Answers1