[Resolved] Split: Split: Filter Single Taxonomy via Checkbox – make custom checkbox filter as toggle button

[Author]

Posts

[michaelA-13]

This is awesome. Thank you. One finally request.

Would it be possible to instead of a checkbox for AND / OR to have a toggle / radio button.

UX wise it would be preferable.

[Minesh]

Hello. Thank you for contacting the Toolset support.

With your view:
- hidden link

I've adjusted the code under "Search and Pagination" section:

<div class="form-group">
  <label for="wpv-custom-and">[wpml-string context="wpv-views"]OR (Default) / AND [/wpml-string]</label>
	<div class="form-check">
      <label class="toggle">
        <input type="checkbox" id="wpv_control_checkbox_wpcf-and" class="js-wpv-filter-trigger form-check-input" name="wpv-wpcf-and" value="AND"  [set_field_checked url_param="wpv-wpcf-and" value="AND"]>
         <span class="slider"></span>
            </label>
        
        </div>
</div>

Added the following CSS code to CSS editor:

.toggle {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
         
        /* Hide the checkbox input */
        .toggle input {
            display: none;
        }
         
        /* Describe slider's look and position. */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            transition: .4s;
            border-radius: 34px;
        }
         
        /* Describe the white ball's location 
              and appearance in the slider. */
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
         
        /* Modify the slider's background color to 
              green once the checkbox has been selected. */
        input:checked+.slider {
            background-color: green;
        }
         
        /* When the checkbox is checked, shift the 
              white ball towards the right within the slider. */
        input:checked+.slider:before {
            transform: translateX(26px);
        }