Switch element on click with jQuery

Question

Currently I have a hamburger menu button: https://jsfiddle.net/sqvwm1dh/

When this is clicked, I'd like to replace it with a graphic.

How do I achieve this with my current code, do I do this in jQuery?

    $('header').prepend('<div id="menu-button"></div>');
    $('#menu-button').on('click', function(){
        var menuItems = $(".menu-primary-menu-container");
        menuItems.toggle();
    });

header {
    background:red;
    height:100px;
}

#menu-button {
    position: relative;
    z-index: 10000;
    display: block;
    top: 30px;
    right:0;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 0px 22px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
  }

  /* line 500, sass/_layout.scss */
  #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }

  /* line 511, sass/_layout.scss */
  #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
    <div class="menu-primary-menu-container">
        test
    </div>
</header>

Answer 1

Method 1(jQuery)

jQuery Methods Used - hide(); and show();

Do something like this-

1. Write the CSS and HTML of the graphic you want to replace with. Also set display:none; to the CSS of the graphic.

2. When the button is clicked hide the button and show the graphic.

   eg-

`

$("#menu-button").click(function(){
        $(this).hide();
        $("#graphic").show();};);

Method 2 (CSS pseudo classes)

The above code is perfectly fine but, it would be an obtrusive code (code that affects functionality of the website if javascript is disabled or script is unable to load).

There are many times when we can't avoid javascript but , here we can so why not give it a shot?

for reference- CSS pseudo class - active

#graphic{ display:none; // add other required css for graphic such as property, height,etc}
#menu-button:active { 
#graphic{ display:block;

 } 
#menu-button{display:none;
 }
}

Answer 2

I think this is a nice and simple solution

$('header').prepend('<div id="menu-button"></div>');
    $('#menu-button').on('click', function(){
        var menuItems = $(".menu-primary-menu-container");
        var menubutton = $(this);
        
        if(menubutton.hasClass('active'))
            menubutton.removeClass('active');
        else
        	menubutton.addClass('active');
        
        menuItems.toggle();
    });

header {
    background:red;
    height:100px;
}

#menu-button {
    position: relative;
    z-index: 10000;
    display: block;
    top: 30px;
    right:0;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 0px 22px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
  }

#menu-button.active {
  /* add your graph here */
}

  /* line 500, sass/_layout.scss */
  #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }

  /* line 511, sass/_layout.scss */
  #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
    <div class="menu-primary-menu-container">
        test
    </div>
</header>