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>

what do you mean by "When this is clicked, I'd like to replace it with a graphic.". Do you want to replace it with some other icon ? — DinoMyte
– DinoMyte, Commented Nov 11, 2015 at 23:13
Apologies. I mean, when the menu-button is clicked, it will change from the menu to a graphic. — michaelmcgurk
– michaelmcgurk, Commented Nov 11, 2015 at 23:20

sudo_dudo · Accepted Answer · 2015-11-11 23:53:31Z

2

Method 1(jQuery)

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

Do something like this-

Write the CSS and HTML of the graphic you want to replace with. Also set display:none; to the CSS of the graphic.
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;
 }
}

edited Nov 11, 2015 at 23:53

answered Nov 11, 2015 at 23:19

sudo_dudo

5811 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hreitsma · Accepted Answer · 2015-11-11 23:14:02Z

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>

Sorry. I'm looking to swap 'menu-button' with a graphic. Not menu-primary-menu-container.

Collectives™ on Stack Overflow

Switch element on click with jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related