Div Not Displaying On Click With JQuery (CSS - Block/None)

Question

I would like it so when I click on a Bootstrap Glyphicon a div is displayed. I currently have this HTML (simplified):

<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>

Then this JS:

$('#headerdisplaybuttonsxs').click(function()) {
    $('#headerrightside').css("display", "block");
});

So I would basically like #headerrightside to display on the clicking of #headerdisplaybuttonsxs. Problem is I can't get that to work.

#headerdisplaybuttonsxs Has a CSS property of display:none.

I have tried $('#headerrightside').show() but that does not seem to work. How could I get this to work? Thank You!!

i think you you have a typo in the code -- .click(function() { ... }); — Brodie
– Brodie, Commented May 18, 2015 at 21:40
Typo yep, an extra ). Thank you so much! Still new to JS, I am a PHP person... :D — Michael Jones
– Michael Jones, Commented May 18, 2015 at 21:41

Allen Tellez · Accepted Answer · 2015-05-18 21:41:36Z

2

There was a typo on the click event function with an extra ).

$('#headerdisplaybuttonsxs').click(function() {
    $('#headerrightside').css("display", "block");
});

#headerrightside {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger">Icon</span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>

answered May 18, 2015 at 21:41

Allen Tellez

1,2111 gold badge11 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Div Not Displaying On Click With JQuery (CSS - Block/None)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related