Is there a Toggle button option?

Anonymous

#239785

Two questions:

1. Can I configure the radio buttons to be click on/click off?
2. Can I configure the checkboxes to be single-select instead of multi-select?

Application:

I have two search components in my form, one for categories and one for tags. They are used together to drill the article set down to the user’s interests. I have the system set up filter out empty elements, both initially and after a filter action.

Checkbox type is OK, but it’s pretty confusing to the user to reset if many elements, lots of clicking.

More intuitive and less clicking is radio button type, except for a couple of UI issues.

Initially both category and tag sets are unfiltered, and both “all” buttons are selected.

The problem is that when a tag is selected that results in a category reduction, the category “all” button remains selected. This is wrong, as the category set is no longer “all.” So “all” needs to be programmatically unchecked in that scenario.

In addition, checking the “all” button should reset the filter.

Request:

Both those issues could be solved very nicely by either of the behaviors in my opening questions.

I did try a reset button workaround, but it’s a bit of a kludge from a UX perspective.

An example is radio buttons on a ’60’s car: push-on selects the button exclusively, unsetting all others; pushing again unsets itself.

This behavior is simple, fast and intuitive. Any tips on how to configure like that?

Also: let me know if my explanation is not good enough and I’ll make an annotated screenshot.

Trevor

#239833

I understand what you want, and we get many requests of this nature each week. The problem is that radio buttons and checkboxes are not designed that way, and for good reasons. This article attepst to dicsuss this:

https://www.nngroup.com/articles/radio-buttons-default-selection/

The choice then is to use either radio button of checkboxes, and modify the behavior of one of the other. Not so easy with radio buttons, so the choice is to use a checkbox but change its behavior so that it can have only one selected option (or none). This article attempts to show some methods to achieve what you want:

https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group

However, what you are trying to do is to modify how the creators of HTML decided such controls should work, which isn’t within the scope of our support. You may need to consult a third party on implementing this. You can see from the most popular answer that it can be done. However, you may need to execute the code once when the document is ready, and also after our Ajax has run like this:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
//    run code here
  });
}(jQuery));
jQuery(document).ready(function($){
//    run code here
});
</script>

Anonymous

#239861

Thank you Trevor for the note, and lots of interesting details too.

I get your thinking.  Instead of helping me then, can you consider this a feature request?  You could make such a feature optional, and off by default, to address your standards concerns.  But as you pointed out, a lot of people ask for it, so it could end up being a good business driver for your plugin.

I was hoping your plugin offered an inbuilt way, but I did it the dirty way (JS and CSS).  The resulting UI though is awesome and intuitive.  Try it. Or if you prefer, I’ll send you a page link when my site is live.

I used radio buttons because their behavior is closest to start.

I hid the inputs with .searchandfilter input { display: none; }

I detected the click on currently-selected radio, and then forced click on hidden “all” input, like this: 

/* On click of already-selected radio-button, force click of hidden "all categories" button to reset field: */
jQuery( document ).ready(function() {
	jQuery(document).on('click', '.sf-field-tag .sf-option-active .sf-label-radio', function(event) {
   		event.preventDefault(); 
		jQuery( '.sf-field-tag .sf-item-0 .sf-label-radio' ).click();
	});
	jQuery(document).on('click', '.sf-field-category .sf-option-active .sf-label-radio', function(event) {
		event.preventDefault(); 
		jQuery( '.sf-field-category .sf-item-0 .sf-label-radio' ).click();
	});
});

Then to make sure it is clear to the user how it works, I styled each of the four states differently (unhover unselected, hover unselected, unhover selected, hover selected).

This results in a clean, intuitive click-on/click-off button system. It works without conflict, because your plugin takes no action on click on already-selected radio.

Thanks for your help, Bruce

Trevor

#239863

I would like to leave this here for others to see?

Could you create a new ticket and refer to this one, in this forum:

https://support.searchandfilter.com/forums/forum/feature-requests/

Thanks.

Anonymous

#239870

Done: https://support.searchandfilter.com/forums/topic/toggle-button-option/

Trevor

#239931

Notes, thanks. I will close this thread for now.

[Author]

Posts