Jquery help needed - 2 Clicks 2 functions

i have a hamburger menu. This is how it looks like:

<input type="checkbox" id="toggle">
    <label for="toggle" class="bigmac">&#x2630;</label>

I used a symbol for the icon. I want to change the icon when clicking on it to a other icon, a cross. And when i click again, to close the menu, change it back to the hamburger.

I tried a lot but have no idea how to do this using the "toggle".

This what i have in jquery to change it to the cross:

$( ".bigmac" ).click(function(){
    $( ".bigmac").html("&#x2715;")
})

But how do i let it change back when clicking again?

Solution

You can add a class cross into the .bigmac element so that you can have a if-else condition setup accordingly to get toggle effect:

$( ".bigmac" ).click(function(){
   if($(".bigmac").hasClass('cross')){
     $(".bigmac").html("&#x2630;").removeClass('cross');
   } else {
     $(".bigmac").html("&#x2715;").addClass('cross');
   } 
})

.cross{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle">
<label for="toggle" class="bigmac">&#x2630;</label>