My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and I want them to maintain the active state CSS until the form is submitted.
This is what I've done so far:
jQuery('.choose-school').click(function() {
jQuery(this).toggleClass('active');
if (jQuery(this).hasClass('active')) {
jQuery(this).text('SELECTED');
} else {
jQuery(this).text('SELECT');
}
});.choose-school.active {
background-color: #eeffd4;
}
.choose-school:active {
background-color: #eeffd4;
}
.choose-school:focus {
background-color: #eeffd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="choose-school">
<h3>Testing
<span class="select-active">SELECT</span>
</button>I attempted using :active and :focus to address the issue, but it didn't work. Additionally, in the JQuery code, I'm trying to change the text of the span from "SELECT" to "SELECTED." Can anyone identify what's wrong with that part of the code?