CambrianCatalyst CambrianCatalyst - 1 year ago 79
CSS Question

.toggle() not registering on button click

Attempting to toggle a div display on and off with a button click. Relevant code below.


<a id="career_link" href="#"><button id="career_button">Professional</button></a>
<a id="academic_link" href="#"><button id="academic_button">Academic</button></a>
<a href="#"><button id="personal_button">Personal</button></a>
<div id="legend_content">
<div id="academic_content">


#legend_content {
display: none;
position: relative;
padding: 25px 10px 25px 10px;
text-align: center;

#academic_button {
background-color: black; /* Test colors later -- Green - #4CAF50 */
border-width: 1px;
border-bottom: none;
color: white;
border-color: black;
padding: 10px 2px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 11.5px;
border-top-left-radius: 0px;
font-weight: bold;
width: 78px;


$(document).ready(function() {
$("#academic_button").click(function() {

Please ignore html for career and personal buttons. I am testing with one and then will implement with 3 later. Can't seem to even get it to work with just the one. I feel like the click isn't even getting registered.


Ben Ben
Answer Source

You need to add a # before legend_content as it is an id.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download