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!!

Answer 1

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>