I have 2 buttons with class df-button and df-web-design - I want to change the background color of only the clicked button when it is clicked, and then when the other button is clicked, the background should return to its default color. I am looking to achieve this using JQuery, similar to how an active tab item works when clicked.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".df-web-design").addClass("df-button-active");
$(".df-button").removeClass("df-button-active");
});
});
</script>.df-button-active {
background-color: green;
color: white;
transition: all 0.5s ease;
}<a class="df-button" href"#">All</a>
<a class="df-web-design" href"#">All</a>Since this is a page builder in Wordpress, I am using page CSS or a code snippet like this. Is there something I am missing as it's not working? I am new to JS, so please excuse my lack of expertise. Your help and advice would be greatly appreciated. Thank you in advance.