Changing the colour of SVG onclick

I cannot work out how when i click the containers "center" and "right" the colour of my SVG changes from white to red. After that, when the containers "center or "right" are clicked again, the SVG goes back to white (its default colour) Here is my html for the SVG:

<nav>
  <span class="nav-btn"> <img src="nav-icon.svg" style="width: 60px;height: 60px;"></span>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Prices</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

And here is my html for my containers:

<div class="container" id= "left" >
        <h1 style="color:white"><a>HAIR</a></h1>
    </div>

    <div class= "container" id= "center">
        <h1 style="color:white"><a>BEAUTY<a/></h1>
    </div>

    <div class="container" id= "right">
        <h1 style="color:white"><a>BARBERS</a></h1>
    </div>

Ideally what I would like to achieve is a 'hamburger' menu which toggled when clicked. If anyone could help this would be very much apreciated.