This seems to be a common problem?
anyway, here is the code
/*****CSS***/
.hidden {
display: none;
}
<!--- my html --->
<div id="buttonCenter">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="console">Console</div>
</div>
// My jQuery
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("activeButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
})
When I alert the panelId, it seems to recognize the ID and assign accordingly. I just can’t seem
to make my panels hidden. Also, I don’t know how to display my HTML code in here without it actually displaying it. I assigned each of the languages titles to a button, including “Console”. I can toggle those active and inactive. I’m not sure where my last line of jQuery is going wrong. That seems to be the only issue.