CambrianCatalyst CambrianCatalyst - 21 days ago 7
CSS Question

.toggle() not registering on button click

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

HTML

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


CSS

#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;
}


JQuery

$(document).ready(function() {
$("#academic_button").click(function() {
$("legend_content").toggle();
});
});


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.

Regards,

Ben Ben
Answer

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

$("#legend_content").toggle();