Keep button in active state until clicked off

Question

This is the page I'm working on: https://www.maisondefemmes.com/product/choose-your-own-adventure-earrings/

I want the buttons to stay in an active state until unclicked so that the user can clearly see what they have selected.

I have read and followed these instructions, to no avail: Keep button in active state until clicked upon again

NB: The 'button' used to be a toggle switch that I have turned off. Not sure if this is causing an issue.

I've added this JQuery to my theme:

$('.bundled_product_optional_checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

As well as this CSS:

.bundled_product_optional_checkbox.active {
 background-color: #cfb87c !important;
 border: 1px solid #cfb87c !important;
}

<label class="bundled_product_optional_checkbox">
  <input class="bundled_product_checkbox" type="checkbox" name="component_1592104877_bundle_selected_optional_4" value>
  " Add for "
  <span class="price">
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">$</span>
    </span>
  </span>
    ::after
</label>

Appreciate any answers. Please be kind.

score 1 · Answer 1 · answered Jun 18 '20 at 06:56

Just create your own class called active

<button class="Toggle Button">Toggle Button</button>

then create your own class active and style it in css

.active{
            border: none;
            background: teal;
            color: white;
        }

Now in jQuery toggle the active class on click

$('.toggle-button').click( function() {
    $('.toggle-button').toggleClass('active');
});

Now you should have a working toggle switch

Here is the link to my code pen: https://codepen.io/prabodhpanda/pen/pogNqpQ

Maulik · Answer 2 · 2020-06-18T06:42:46.183

0

answer updated..

if you are not using bootstrap then you can ignore those classes and CDN links : )

$('.bundled_product_optional_checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

.bundled_product_optional_checkbox.active {
 background-color: #cfb87c !important;
 border: 1px solid #cfb87c !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button class="btn btn-lg btn-default border bundled_product_optional_checkbox">Click me</button>

edited Jun 18 '20 at 06:42

answered Jun 18 '20 at 06:07

Maulik

87
7

Thanks for replying. I haven't had any luck with that. Is there anything wrong with my code? Am I using the wrong class 'bundled_product_checkbox'? Am I adding my jQuery into the wrong location: /wp-content/themes/theme/js/new-file ?The theory of the original post makes sense to me but I just can't seem to get the elements right. – Jess Kumanovski Jun 18 '20 at 06:30
@JessKumanovski see my answer now.. i updated my answer – Maulik Jun 18 '20 at 06:43
@ maulik Sorry I see that I had the wrong class in my jquery. I have updated with the above and still no luck. I see how it should work, it makes sense, but something is wrong :( – Jess Kumanovski Jun 18 '20 at 06:50
I have updated my original questions with what I *think* is the information you've asked for. I have not coded this from scratch, updating a theme. – Jess Kumanovski Jun 18 '20 at 07:34

Keep button in active state until clicked off

2 Answers2