Search Results for 'label option active none'

[Trevor]

I am not sure what you mean? The search will show you some replies in our forum (with snippets) that do as you want:

https://support.searchandfilter.com/forums/search/label+option+active+none/

The field names would likely need changing in the CSS.

[Trevor]

You have this CSS that is causing a problem (can you remove it?):

@media (min-width: 991px) {
  .ct-shortcode .searchandfilter > ul > li {
    width: 16.66666667%;
  }
}
@media (min-width: 768px) {
  .ct-shortcode .searchandfilter > ul > li {
    width: 33.33333333%;
  }
}

But, my attempt:

.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order input {
  display: none;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order label:hover {
  background-color: #7DA85B;
  color: #fff;
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}

A start at least, change as you need.

[Trevor]

This will give you some ideas I think:

.searchandfilter[data-sf-form-id="6198"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort input {
  display: none;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort label:hover {
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul {
  margin-left: -5px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}

[Anonymous]

before my loop start I’m define some empty arrray. then when loop start, using array push method i added value on those array.

https://prnt.sc/rysvwt
https://prnt.sc/ryswfe

by using this array i run some javascript.

https://prnt.sc/rysx71

now what heppened when i filter the array will not update. so my script stop working after filter.even though i add this

https://prnt.sc/rysy07

how to solve this problem?

<?php
/* 
   Template Name: Broker list
*/

get_header(); ?>

<?php do_action( 'ocean_before_content_wrap' ); ?>

<div id="content-wrap" class="container clr">

    <?php do_action( 'ocean_before_primary' ); ?>

    <div id="primary" class="content-area clr">

        <?php do_action( 'ocean_before_content' ); ?>

        <div id="content" class="site-content clr">

            <?php do_action( 'ocean_before_content_inner' ); ?>

            <!--start my coding-->
            <?php 
				$ourCurrentPage = get_query_var('paged');
                $args = array(  
               'post_type' => 'broker',
               'post_status' => 'publish',
               'posts_per_page' => 8,
               'paged' => $ourCurrentPage
                );
                $args['search_filter_id'] = 756;
                $the_query = new WP_Query( $args ); ?>
            <?php echo do_shortcode('[elementor-template id="655"]'); ?>
            <div class="main-container">
                <span class="flot-filter"><i class="fas fa-sliders-h"></i></span>
                <div class="filter-wrap">
                    <div class="filter">
                    <span class="close"><i class="far fa-times-circle"></i></span>
                    <p>Filters</p>
                    <?php echo do_shortcode('[searchandfilter id="756"]'); ?>
                </div>
                </div>
                <div class="sections">
                    <?php
                    $items = Array();
                    $item = Array();
                    $posts = Array(); 
                    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                    <?php 
                           $cash_back_heading = get_field("cash_back_heading");
                           $profile_image = get_field("profile_image");
                           $website_link = get_field('website_link');
                           $count=0;
                           $counttwo=0;
                           $countthree=0;
                         ?>
                    <?php array_push( $posts, get_the_ID() ) ?>
                    
                    
                    <?php array_push( $items, strtolower(preg_replace('/\s+/', '_', get_the_title("",false))) ) ?>
                    <?php array_push( $item, strtolower(preg_replace('/\s+/', '', get_the_title("",false))) ) ?>
                    <div class="intro">
                        <div class="flex-container">
                            <div class="flex-q-1">
                                <img />' alt="" />
                            </div>
                            <div class="flex-q-3">
                                <h4><?php echo the_title(); ?> <span> >> </span> <a>" class="details-button" target="_blank">Details</a></h4>
                                <div class="flex">
                                    <div class='flex-full s<?php echo get_the_ID();?>'>
                                        <?php if( have_rows('table') ): ?>
                                        <?php while ( have_rows('table') ) : the_row(); ?>
                                        <?php if( have_rows('column') ): ?>
                                        <?php while ( have_rows('column') ) : the_row(); ?>
                                        <?php if( have_rows('table_data') ): ?>
                                        <ul class="ac">
                                            <?php while ( have_rows('table_data') ) : the_row();$counttwo++ ?>
                                            <?php if( $counttwo == 1): ?>
                                            <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                            <?php else: ?>
                                            <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                        </ul>
                                        <?php endif; ?>
                                        <?php break;  ?>
                                        <?php endwhile; ?>
                                        <?php endif; ?>
                                        <?php endwhile; ?>
                                        <?php endif; ?>
                                        <?php if( have_rows('table') ): ?>
                                        <ul class="main-flex">
                                            <?php while ( have_rows('table') ) : the_row(); ?>
                                            <?php if( have_rows('column') ): ?>
                                            <?php while ( have_rows('column') ) : the_row(); ?>
                                            <li class="main-flex-child">
                                                <?php if( have_rows('table_data') ): ?>
                                                <?php $count++; ?>
                                                <?php if($count == 2): ?>
                                                <ul class='normal active'>
                                                    <?php else: ?>
                                                    <ul class='normal'>
                                                        <?php endif; ?>
                                                        <?php while ( have_rows('table_data') ) : the_row();?>
                                                        <?php if( !$countthree): ?>
                                                        <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                                        <?php $dropdowns[] = get_sub_field('table_cell'); ?>
                                                        <?php else: ?>
                                                        <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                                        <?php endif; ?>
                                                        <?php  $countthree++ ?>
                                                        <?php endwhile;  ?>
                                                        <?php  $countthree=0 ?>
                                                    </ul>
                                                    <?php endif; ?>
                                            </li>
                                            <?php endwhile; ?>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                        </ul>
                                        <?php endif; ?>
                                    </div>
                                    <p class="sh">more</p>
                                </div>
                            </div>
                            <div class="flex-q-1 last">
                                <div class='payment <?php echo get_the_ID();?>'>
                                    <h4>Payment Options</h4>
                                    <?php if( have_rows('payment_options') ): ?>
                                    <ul>
                                        <?php while ( have_rows('payment_options') ) : the_row(); ?>
                                        <li><img src="https://moneybackfx.com/wp-content/uploads/2020/04/check-mark.png" alt="" /><?php the_sub_field('payment'); ?></li>
                                        <?php endwhile; ?>
                                    </ul>
                                    <?php endif; ?>
                                    <button id="send" class="send">Get CashBack</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <?php $dropdowns!=null?$dropdown[]=$dropdowns:null ?>
                    <?php $dropdowns = Array() ?>
                    
                    <?php endwhile; ?>

                    <div class="pagination">
                        <h2><?php echo paginate_links(array(
                    'total' => $the_query->max_num_pages
                    ));
                    ?></h2>
                    </div>

                    <?php else : ?>
                    <div class="not-found">
                        <p><?php  _e( 'Sorry, no brokers matched your criteria.'); ?></p>
                    </div>
                    <?php endif; ?>

                    <?php wp_reset_postdata(); ?>
                </div>
            </div>
            <?php echo do_shortcode('[elementor-template id="658"]'); ?>
            <?php echo do_shortcode('[elementor-template id="661"]'); ?>
            <!--end of my coding-->
            <style>
                select,
                select:focus {
                    font-size: 16px
                }

                body {
                    color: #333
                }

                h1,
                h2,
                h3,
                h4 {
                    font-family: Poppins, Sans-serif;
                    margin-bottom: 10px
                }

                p {
                    font-family: Montserrat, Sans-serif;
                    font-weight: 500;
                    line-height: 1.8em
                }

                .sh {
                    text-align: center;
                    font-size: 11px;
                    border-bottom: 1px dotted #24eaa4;
                    color: #24eaa4;
                    margin: 0px auto;
                    cursor: pointer;
                    font-weight:700;
                }

                .main-container {
                    background: #f7f7f7;
                    padding: 20px 15px
                }

                .intro {
                    background: #fff;
                    padding: 30px 20px;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    border-radius: 5px;
                    margin-bottom: 15px
                }

                .intro .flex-q-1 img {
                    max-width: 50%;
                    border-radius: 3px;
                }

                .intro .flex-q-1,
                .intro .flex-q-3 {
                    text-align: center
                }

                .intro .flex-q-3 h4 {
                    margin: 15px 0;
                    font-size: 15px;
                }

                .payment h4 {
                    margin: 10px 0 7px;
                    font-size: 15px;
                }

                .intro .flex-q-3 h4 span,
                .intro .flex-q-3 h4 a {
                    font-size: 13px;
                    font-weight: 400;
                }

                .intro .flex-q-3 h4 a {
                    border-bottom: 1px dotted #8482d6;
                }

                .payment ul {
                    list-style: none;
                    margin: 0 0 10px 0;
                }

                .payment ul li img {
                    display: inline;
                }

                .send {
                    font-weight: 600 !important;
                    border-radius: 31px 31px 31px 31px;
                    box-shadow: 4px 4px 10px 0 rgba(36, 234, 164, .38);
                    padding: 5px 30px 5px 30px;
                    border: none
                }

                .send:hover {
                    background: #24eaa4
                }

                .intro .main-flex {
                    list-style: none;
                    margin: 0
                }

                .intro .main-flex ul,
                .intro ul.ac {
                    list-style: none;
                    margin: 0
                }

                .intro .main-flex .main-flex-child {
                    flex-grow: 1;
                }

                .intro .main-flex ul li,
                .intro ul.ac li {
                    padding: 5px;
                    border: 1px solid #eee;
                    font-weight: 500;
                    font-size: 13px;
                    font-family: Montserrat, Sans-serif;
                }

                .payment ul li {
                    font-weight: 500;
                    font-size: 12px;
                    font-family: Montserrat, Sans-serif;
                }

                .intro .main-flex ul li:first-child,
                .intro ul.ac li:first-child {
                    color: #8482d6;
                    font-family: Poppins, Sans-serif;
                    background: rgba(132, 130, 214, .32);
                    font-weight: 500;
                    font-size: 13px;
                }

                .intro .flex-full {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                }

                .intro .flex-full .ac,
                .intro .flex-full .main-flex {
                    flex-grow: 1;
                    max-width: 50%
                }

                .intro .flex-full .main-flex-child ul {
                    display: none
                }

                .intro .flex-full .main-flex-child ul.active {
                    display: block
                }

                .mob {
                    display: none
                }

                .intro .flex {
                    display: flex;
                    flex-wrap: wrap
                }

                .center-h.h {
                    margin-top: 20px
                }
                .paym{
                    order:1;
                }
                .paym p{
                    font-weight:bold;
                    margin:0 0 10px;
                }
                .payment{
                    display:flex;
                    flex-direction:column;
                }
                .payment .send{
                    order:2;
                }
                .paym p span{
                    position:relative;
                    display:inline-block;
                    border-radius:100%;
                    background:#333;
                    color:#fff;
                    width:18px;
                    height:18px;
                    line-height:18px;
                    font-size:11px;
                }
                .paym ul{
                    position:absolute;
                    list-style:none;
                    margin:0px;
                    padding:15px;
                    border-radius:5px;
                    box-shadow:2px 4px 10px rgba(0,0,0,.17);
                    display:inline;
                    background:#fff;
                    text-align:left;
                    display:none;
                    bottom:41px;
                    left:50%;
                    transform:translatex(-50%);
                    width:300px;
                    transition:.2s;
                    color:#333;
                }
                .payment .paym ul,.payment > ul{
                    display:none;
                }
                .paym p span:hover ul{
                    display:block;
                    bottom:38px;
                }
                /************************************search and filter**************************************/
                .filter-wrap{
                    overflow:hidden;
                    position:fixed;
                    z-index:3;
                    width:0%;
                    transition: 0.2s;
                    top:0;
                    left:0;
                    background:rgba(0, 0, 0, .11);
                }
                .filter{
                    background:#fff;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .75);
                    border-radius: 5px;
                    margin-bottom:15px;
                    margin-top:85px;

                }
                .filter-wrap.open{
                    padding:0px 15px;
                    width:100%;
                    height:100%;
                }
                .filter .close{
                     float:right;
                     cursor:pointer;
                     font-size:25px;
                     color:#606060;
                     margin-top:0px;
                     margin-right:10px;
                 }
                .filter p{
                    background:#ebebeb;
                    color:#606060;
                    padding:10px;
                    margin-bottom:0;
                    border-radius:5px 5px 0 0;
                }
                .filter #search-filter-form-756{
                    padding:15px;
                }
                #search-filter-form-756 ul{
                    display:flex;
                    flex-wrap:wrap;
                    margin:0px;
                }
                #search-filter-form-756 ul li{
                    width:100%;
                }
                #search-filter-form-756 ul li input,#search-filter-form-756 ul li label{
                    display:block;
                }
                  ::-webkit-input-placeholder { /* Edge */
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                
                :-ms-input-placeholder { /* Internet Explorer 10-11 */
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                
                ::placeholder {
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                select:focus,select,input,option{
                  font-size: 13px;
                  font-family: "Montserrat", Sans-serif;
                  border-radius:5px;
                }
                form input[type="text"], form input[type="password"],
                form input[type="email"], form input[type="url"],
                form input[type="date"], form input[type="month"],
                form input[type="time"], form input[type="datetime"],
                form input[type="datetime-local"], form input[type="week"],
                form input[type="number"], form input[type="search"],
                form input[type="tel"], form input[type="color"],
                form select, form textarea{
                    min-height:30px;
                    line-height:30px;
                    font-size:13px;
                    padding:0px 12px;
                }
                .flot-filter{
                    text-align:center;
                    display:inline-block;
                    background:#121126;
                    border-radius:100%;
                    box-shadow: 4px 4px 10px 0px rgba(36, 234, 164, 0.38);
                    overflow:hidden;
                    position:fixed;
                    top:85px;
                    left:15px;
                    cursor:pointer;
                    width: 50px;
                    height: 50px;
                    border-radius: 100%;
                    z-index:2;
                }
                .flot-filter i{
                    color:#24eaa4;
                    font-size: 28px;
                    line-height: 50px;
                }
                /**************************pagination*******************************/
                .pagination{
                    margin:auto;
                    text-align:center;
                }
                .pagination h2{
                    font-weight:500;
                    font-size:15px;
                    padding:7px;
                    background:#fff;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    display:inline-block;
                    
                }
                .page-numbers{
                    padding:3px;
                    margin:0px 2px;
                    width:31px;
                    display:inline-block;
                }
                .page-numbers.current{
                    background:#24eaa4;
                    border-radius:2px;
                    color:#fff;
                }
                .next,.prev{
                    width:initial;
                }
                @media(min-width:768px) {
                    .flot-filter{
                        display:none;
                    }
                    .intro .flex-q-3 h2 {
                        margin-top: 0
                    }
                    .filter-wrap{
                        position:initial;
                        background:none;
                        width:100%;
                    }
                    .filter{
                        margin-top:0px;
                        box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    }
                    .close{
                        display:none;
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:48%;
                    }
                    #search-filter-form-756 ul{
                        justify-content:space-around;
                    }
                }

                @media(min-width:992px) {
                    .payment > ul{
                        display:block;
                    }
                    .payment .paym{
                        display:none;
                    }
                    .intro .flex-container {
                        display: flex
                    }

                    .intro .flex-q-1 {
                        max-width: 15%;
                        width: 15%
                    }

                    .intro .flex-q-1 img {
                        display: block;
                        max-width: 90%
                    }

                    .intro .flex-q-1 ul li img {
                        display: inline;
                    }

                    .intro .flex-q-3 {
                        text-align: left;
                        align-self: center;
                        width: 65%
                    }

                    .intro .flex-q-1.last {
                        max-width: 20%;
                        width: 20%;
                        align-self: center;
                    }

                    .mob {
                        display: block
                    }

                    .desk {
                        display: none
                    }

                    .intro .flex {
                        display: flex;
                        justify-content: space-between;
                        flex-basis: 1
                    }

                    select[name="Platform"],
                    .ac {
                        display: none
                    }

                    .intro .flex-full .main-flex-child ul {
                        display: initial
                    }

                    .intro .main-flex {
                        display: flex
                    }

                    .intro .flex-full .ac,
                    .intro .flex-full .main-flex {
                        max-width: initial
                    }

                    .intro .main-flex .main-flex-child {
                        max-width: 40%;
                    }

                    .payment {
                        margin-left: 15px;
                    }

                    .td {
                        display: none;
                    }
                    .filter-wrap{
                        max-width: 1100px;
                        margin: auto;
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:30%;
                    }
                    
                    .sf-field-sort_order{
                        margin-left:-10px !important;
                    }
                }

                @media(min-width:1200px) {
                    .sections {
                        max-width: 1100px;
                        margin: auto
                    }

                    .intro .flex-full {
                        overflow-x: initial
                    }

                    .intro- {
                        padding-left: 2%;
                        padding-right: 2%
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:15%;
                    }
                }
            </style>

            <script>
                <?php 
            $js_pid = json_encode($posts);
            $js_dropdown = json_encode($dropdown);
            $js_items = json_encode($items);
            $js_item = json_encode($item);
            echo "var pID = ". $js_pid . ";\n";
            echo "var dropDown = ". $js_dropdown . ";\n";
            echo "var items = ". $js_items . ";\n";
            echo "var item = ". $js_item . ";\n";
            ?>
                for (t = 0; t < dropDown.length; t++) {
                    var select = jQuery('<select>').prop('name', 'Platform')
                        .prop('class', 'Plat');
                    for (k = 1; k < dropDown[t].length; k++) {
                        select.append(jQuery("<option>")
                            .prop('value', dropDown[t][k])
                            .text(dropDown[t][k]));
                    }
                    jQuery('.flex-full:eq(' + [t] + ')').prepend(select);
                }
                jQuery('.normal').each(function() {
                    var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                    jQuery(this).addClass(k);
                });
                jQuery('.Plat').change(function() {
                    var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                    var q = o.replace(/ /g, "_");
                    jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active')
                });
                for (i = 0; i < pID.length; i++) {
                    var v = jQuery('.payment.' + pID[i] + ' ul li').length;
                    var l = '<div class="paym"><p><span>' + v + '</span></p></div>';
                    jQuery('.payment.' + pID[i]).append(l);
                }
                jQuery('.paym').each(function(){
                    var xt = jQuery(this).closest('.payment').find('ul').html();
                   jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); 
                });
                jQuery('.flot-filter').click(function(){
                    jQuery('.filter-wrap').addClass('open');
                });
                jQuery('.close').click(function(){
                    jQuery('.filter-wrap').removeClass('open');
                });
            </script>

            <script>
                function equalHeights(className) {
                    var findClass = document.getElementsByClassName(className);
                    var tallest = 0;
                    for (i = 0; i < findClass.length; i++) {
                        var ele = findClass[i];
                        var eleHeight = ele.offsetHeight;
                        tallest = (eleHeight > tallest ? eleHeight : tallest); 
                    }
                    for (i = 0; i < findClass.length; i++) {
                        findClass[i].style.height = tallest + "px";
                    }
                }
                for (p = 0; p < items.length; p++) {
                    equalHeights(items[p]);
                    equalHeights(item[p]);
                }
                function sH(){
                    jQuery('ul.ac').each(function() {
                        jQuery('li:gt(2)', this).hide()
                    });
                    jQuery('ul.normal').each(function() {
                        jQuery('li:gt(2)', this).hide();
                        var tx = jQuery('li', this).length;
                        if (tx <= 3) {
                            jQuery(this).closest('.flex').find('.sh').hide();
                        }
                    });
    
                    jQuery('.sh').on('click', function(e) {
                        e.preventDefault();
                        var ql = jQuery(this).closest('.flex').find('ul.normal');
                        jQuery(this).closest('.flex').find('ul.ac li:gt(2)').slideToggle();
                        ql.each(function() {
                            jQuery('li:gt(2)', this).slideToggle();
                        });
                    });
                }
                sH();
               (function($) {
                    "use strict";
                    jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function() {
                        for (t = 0; t < dropDown.length; t++) {
                            var select = jQuery('<select>').prop('name', 'Platform')
                                .prop('class', 'Plat');
                            for (k = 1; k < dropDown[t].length; k++) {
                                select.append(jQuery("<option>")
                                    .prop('value', dropDown[t][k])
                                    .text(dropDown[t][k]));
                            }
                            jQuery('.flex-full:eq(' + [t] + ')').prepend(select);
                        }
                        jQuery('.normal').each(function() {
                            var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                            jQuery(this).addClass(k);
                        });
                        jQuery('.Plat').change(function() {
                            var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                            var q = o.replace(/ /g, "_");
                            jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active')
                        });
                        for (i = 0; i < pID.length; i++) {
                            var v = jQuery('.payment.' + pID[i] + ' ul li').length;
                            var l = '<div class="paym"><p><span>' + v + '</span></p></div>';
                            jQuery('.payment.' + pID[i]).append(l);
                        }
                        jQuery('.paym').each(function(){
                            var xt = jQuery(this).closest('.payment').find('ul').html();
                           jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); 
                        });
                        sH();
                        for (p = 0; p < items.length; p++) {
                            equalHeights(items[p]);
                            equalHeights(item[p]);
                            equalHeights('instatorex_markets');
                            equalHeights('instatorexmarkets');
                            equalHeights('axitrader_markets');
                            equalHeights('axitradermarkets');
                            
                        }
                    });
                }(jQuery));
            </script>
            <?php do_action( 'ocean_after_content_inner' ); ?>

        </div><!-- #content -->

        <?php do_action( 'ocean_after_content' ); ?>

    </div><!-- #primary -->

    <?php do_action( 'ocean_after_primary' ); ?>

</div><!-- #content-wrap -->

<?php do_action( 'ocean_after_content_wrap' ); ?>

<?php get_footer(); ?>

[Anonymous]

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]

I think that the Ajax Container will need changing to .posts

Se how many of the issues that fixes, and then, yes, using custom CSS, you can hide the radio buttons, using Custom CSS like this (please try this):

#search-filter-form-532 .sf-field-category input {
  display: none;
}
#search-filter-form-532 .sf-field-category label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px !important;
  text-indent: 0;
}
#search-filter-form-532 .sf-field-category label:hover {
  cursor: pointer;
}
#search-filter-form-532 .sf-field-category > ul > li {
  display: inline-block;
  margin-left: 5px;
}
#search-filter-form-532 .sf-field-category > ul {
  margin-left: -5px;
}
#search-filter-form-532 .sf-field-category > ul > li.sf-option-active label {
  background-color: #ccc;
}

Do play with this, as this creates a series of ‘buttons’.

[Trevor]

As a quick attempt, maybe this:

.searchandfilter h4 {
  width: 200px;
  display: inline-block;
}
.searchandfilter > ul > li > ul {
  display: inline-block;
  vertical-align: top;
}
.searchandfilter > ul > li > ul > li {
  display: inline-block;
  margin-right: 10px;
}
.searchandfilter li[data-sf-field-input-type=checkbox] input {
  display: none;
}
.searchandfilter li[data-sf-field-input-type=checkbox] > ul > li label:hover {
  cursor: pointer;
  background: #fff;
}
.searchandfilter li[data-sf-field-input-type=checkbox] > ul > li.sf-option-active label {
  background: #fff;
}

[Trevor]

Can you try this custom CSS:

.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li label {
  line-height: 42px;
  border-bottom: 1px solid #666;
  width: 100%;
  padding-left: 0px;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category input {
  display: none;
}
.searchandfilter ul li[data-sf-field-input-type=checkbox].sf-field-category li {
  padding: 0;
}
.searchandfilter ul li[data-sf-field-input-type=checkbox].sf-field-category {
  padding: 0;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li.sf-option-active label {
  color: #e3051c;
}
.searchandfilter li[data-sf-field-input-type=checkbox].sf-field-category > ul > li label:hover {
  cursor: pointer;
}

[Trevor]

I was thinking of something like this CSS:

.searchandfilter .sf-field-category input {
  display: none;
}
.searchandfilter .sf-field-category label {
  text-align: center;
  width: 50px;
  line-height: 42px;
  border: 1px solid #666;
  color: #666;
  border-radius: 3px;
  padding: 3px !important;
  text-indent: 0;
}
.searchandfilter .sf-field-category > ul > li.sf-option-active label {
  color: #fff;
  background: #666;
}
.searchandfilter .sf-field-category > ul > li {
  display: inline-block;
  margin-right: 10px;
}
.searchandfilter .sf-field-category label:hover {
  cursor: pointer;
}
#main-content .searchandfilter .sf-field-category > ul > li {
  margin-left: 0 !important;
}

[Trevor]

One thing you might want to consider is making those tags more like a tag cloud in the form, using custom CSS like this:

#search-filter-form-9474 .sf-field-tag input {
  display: none;
}
#search-filter-form-9474 .sf-field-tag label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
#search-filter-form-9474 .sf-field-tag label:hover {
  cursor: pointer;
}
#search-filter-form-9474 .sf-field-tag > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}
#search-filter-form-9474 .sf-field-tag > ul {
  margin-left: -5px;
}
#search-filter-form-9474 .sf-field-tag > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}
#search-filter-form-9474 .sf-field-tag .sf-count {
  padding-right: 0;
}

The new code would make it look like this in an example search:

https://www.screencast.com/t/78obilCRbV

And what it looked like before:

https://www.screencast.com/t/3l1HZfOJ7