locked
How to filtering HTML5 data-attribute elements via checkboxes using JQuery RRS feed

  • Question

  • User-1846918160 posted

    In my listing wrapper each product has multiple data-attributes like data-baths="3", data-beds="4", data-halfbath="12", data-garages="2", data-stories="2", data-price="2", data-sqft="2567".

    I have checkboxes that has a category corresponding to the data-category="value" here value may be baths/ beds/ halfbath/ garages/ stories/ price/ sqft like

    <input type='checkbox' class='filter' data-filter='baths' value='1'> 1 Bathroom
    <input type='checkbox' class='filter' data-filter='beds' value='2'> 2 Bedrooms

    So when a user selects checkboxes I need to only display the products based on the category.

    Problem is, if I choose multiple categories (checkbox values) it is missing some criteria and displaying unconditional data.

    Here is my JSFiddle

    Here is JQuery code

    $(".filter").change(function(){
        var beds=[],baths=[],halfbaths=[],garages=[],stories=[];    
    $('.filter').each(function(){
            if($(this).is(':checked')){
                currentValue=$(this).val();     
    
                if($(this).attr('data-filter')==='beds'){                   
                    if($.inArray(currentValue, beds) == -1){beds.push(currentValue);}   
                }
                if($(this).attr('data-filter')==='baths'){
                    if($.inArray(currentValue, baths) == -1){baths.push(currentValue);} 
                }
                if($(this).attr('data-filter')==='halfbath'){
                    if($.inArray(currentValue, halfbaths) == -1){halfbaths.push(currentValue);} 
                }
                if($(this).attr('data-filter')==='garages'){
                    if($.inArray(currentValue, stories) == -1){stories.push(currentValue);} 
                }
                if($(this).attr('data-filter')==='stories'){
                    if($.inArray(currentValue, stories) == -1){stories.push(currentValue);} 
                }
            }
            else{
                currentValue=$(this).val();
                if($(this).attr('data-filter')=='beds'){                    
                    beds = $.grep(beds, function(b) {return b != currentValue;});                                       
                }
                if($(this).attr('data-filter')=='baths'){
                    baths=$.grep(baths, function(b) {return b != currentValue;});                   
                }
                if($(this).attr('data-filter')=='halfbath'){
                    halfbaths=$.grep(halfbaths, function(b) {return b != currentValue;});
                }
                if($(this).attr('data-filter')=='garages'){
                    garages=$.grep(garages, function(b) {return b != currentValue;});
                }
                if($(this).attr('data-filter')=='stories'){
                    stories=$.grep(stories, function(b) {return b != currentValue;});
                }
            }
        });
    
        var bedsselector=[], bathsselector=[], halfbathssselector=[], garagesselector=[], storiessselector=[];
        if(beds){
            $(beds).each(function(index,value){
                bedsselector.push('[data-beds='+value+']');
            });     
            //console.log('.listing-wrap'+bedsselector.join(','));  
        }
        if(baths){
            $(baths).each(function(index,value){
                bathsselector.push('[data-baths='+value+']');
            });     
            //console.log('.listing-wrap'+bathsselector.join(',')); 
        }
        if(halfbaths){
            $(halfbaths).each(function(index,value){
                halfbathssselector.push('[data-halfbath='+value+']');
            });     
            //console.log('.listing-wrap'+halfbathssselector.join('')); 
        }
        if(garages){
            $(garages).each(function(index,value){
                garagesselector.push('[data-garages='+value+']');
            });     
            //console.log('.listing-wrap'+garagesselector.join(''));    
        }
        if(stories){
            $(stories).each(function(index,value){
                storiessselector.push('[data-stories='+value+']');
            });     
            //console.log('.listing-wrap'+storiessselector.join(''));   
        }
    
    
        console.log('.listing-wrap'+bedsselector.join(',')+bathsselector.join(','));
        $(".listing-wrap").hide();
    
        console.log($('.listing-wrap').filter(bathsselector.join()));
        $('.listing-wrap'+bathsselector.join()).show('slow');       
    });
      clearfilter=function(){
        $('.filter').attr('checked',false);
        $(".listing-wrap").show("slow");
    }

    Here is my HTML:

    <div class="col col-sm-3 col-md-3">
    <div class="clear_btn_section"><button class="btn btn-default " onclick="clearfilter();">Clear Filter</button></div>
    <div class="clearfix clear-fix"></div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Bedrooms</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="beds" value="1"/>  <span> 1 Bedroom</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="2"/>  <span> 2 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="3"/>  <span> 3 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="4"/>  <span> 4 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="5"/>  <span> 5 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="6"/>  <span> 6 Bedrooms</span></label>
        </div>
    </div>
    </div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Bathrooms</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="1"> <span>1 Bathroom</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="2"> <span>2 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="3"> <span>3 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="4"> <span>4 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="5"> <span>5 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="6"> <span>6 Bathrooms</span></label>
        </div>
    </div>
    </div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Halfbath</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="1"><span> 1 Halfbath</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="2"><span> 2 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="3"><span> 3 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="4"><span> 4 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="5"><span> 5 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="6"><span> 6 Halfbaths</span></label>
        </div>
    </div>
    </div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Garages</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="garages" value="1"/><span> 1 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="2"/><span> 2 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="3"/><span> 3 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="4"/><span> 4 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="5"/><span> 5 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="6"/><span> 6 Cars</span></label>
        </div>
    </div>
    </div>
    
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Stories</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="1"><span> 1 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="2"><span> 2 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="3"><span> 3 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="4"><span> 4 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="5"><span> 5 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="6"><span> 6 Stories</span></label>
        </div>
    </div>
    </div>
    <div class="clearfix clear-fix"></div>
    </div>
    <div class="wp-listings-shortcode col col-sm-8 col-md-8">
        <div data-baths="3" data-beds="4" data-halfbath="12" data-garages="2" data-stories="2" data-price="2" data-sqft="2567" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Lexington</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">4<span>Beds</span></li>
                    <li class="baths">3<span>Baths</span></li>
                    <li class="baths">12<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,567<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">2<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="4" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2701" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Everest</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">4<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,701<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2126" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Fairmont</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,126<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft="3732" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Elkton</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3,732<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">2<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1784" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Belmont</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">1,784<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1698" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Audrey</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">1,698<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="3" data-stories="1" data-price="" data-sqft="3450" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Aspen</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3,450<span>Sqft Footage</span></li>
                    <li class="baths">3<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="3" data-beds="5" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft="    3718" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Alpine</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">5<span>Beds</span></li>
                    <li class="baths">3<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3,718<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">2<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2195" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Alexander</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,195<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="1000" data-sqft="2100" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Camden</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,100<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="4" data-beds="3" data-halfbath="-" data-garages="-" data-stories="-" data-price="100" data-sqft="50" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">model two</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">4<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">50<span>Sqft Footage</span></li>
                    <li class="baths">-<span>Garages</span></li>
                    <li class="baths">-<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="-" data-beds="-" data-halfbath="-" data-garages="-" data-stories="-" data-price="" data-sqft="452136" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Model One</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">-<span>Beds</span></li>
                    <li class="baths">-<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">452,136<span>Sqft Footage</span></li>
                    <li class="baths">-<span>Garages</span></li>
                    <li class="baths">-<span>Stories</span></li>
                </ul>
            </div>
        </div>
    </div>



    Tuesday, October 18, 2016 9:34 AM

All replies

  • User283571144 posted

    Hi sridharnetha,

    Problem is, if I choose multiple categories (checkbox values) it is missing some criteria and displaying unconditional data.

    if($(this).attr('data-filter')==='garages'){ if($.inArray(currentValue, stories) == -1){stories.push(currentValue);} }

    According to your codes, I find you add "stories" property twice.

    I guess this is the reason which you choosed multiple categories (checkbox values) it is missing some criteria and displaying unconditional data.

    So I suggest you could change your codes as below:

       if ($(this).attr('data-filter') === 'garages') {
                                if ($.inArray(currentValue, stories) == -1) { garages.push(currentValue); }
                            }

    More details about my demo, you could refer to follow codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script>
            $(function () {
                $(".filter").change(function () {
                    var beds = [], baths = [], halfbaths = [], garages = [], stories = [];
                    $('.filter').each(function () {
                        if ($(this).is(':checked')) {
                            currentValue = $(this).val();
                            if ($(this).attr('data-filter') === 'beds') {
                                if ($.inArray(currentValue, beds) == -1) { beds.push(currentValue); }
                            }
                            if ($(this).attr('data-filter') === 'baths') {
                                if ($.inArray(currentValue, baths) == -1) { baths.push(currentValue); }
                            }
                            if ($(this).attr('data-filter') === 'halfbath') {
                                if ($.inArray(currentValue, halfbaths) == -1) { halfbaths.push(currentValue); }
                            }
    
                            if ($(this).attr('data-filter') === 'garages') {
                                if ($.inArray(currentValue, stories) == -1) { garages.push(currentValue); }
                            }
                            if ($(this).attr('data-filter') === 'stories') {
                                if ($.inArray(currentValue, stories) == -1) { stories.push(currentValue); }
                            }
                        }
                        else {
                            currentValue = $(this).val();
                            if ($(this).attr('data-filter') == 'beds') {
                                beds = $.grep(beds, function (b) { return b != currentValue; });
                            }
                            if ($(this).attr('data-filter') == 'baths') {
                                baths = $.grep(baths, function (b) { return b != currentValue; });
                            }
                            if ($(this).attr('data-filter') == 'halfbath') {
                                halfbaths = $.grep(halfbaths, function (b) { return b != currentValue; });
                            }
                            if ($(this).attr('data-filter') == 'garages') {
                                garages = $.grep(garages, function (b) { return b != currentValue; });
                            }
                            if ($(this).attr('data-filter') == 'stories') {
                                stories = $.grep(stories, function (b) { return b != currentValue; });
                            }
                        }
                    });
    
                    var bedsselector = [], bathsselector = [], halfbathssselector = [], garagesselector = [], storiessselector = [];
                    if (beds) {
                        $(beds).each(function (index, value) {
                            bedsselector.push('[data-beds=' + value + ']');
                        });
                        //console.log('.listing-wrap'+bedsselector.join(','));  
                    }
                    if (baths) {
                        $(baths).each(function (index, value) {
                            bathsselector.push('[data-baths=' + value + ']');
                        });
                        //console.log('.listing-wrap'+bathsselector.join(',')); 
                    }
                    if (halfbaths) {
                        $(halfbaths).each(function (index, value) {
                            halfbathssselector.push('[data-halfbath=' + value + ']');
                        });
                        //console.log('.listing-wrap'+halfbathssselector.join('')); 
                    }
                    if (garages) {
                        $(garages).each(function (index, value) {
                            garagesselector.push('[data-garages=' + value + ']');
                        });
                        //console.log('.listing-wrap'+garagesselector.join(''));    
                    }
                    if (stories) {
                        $(stories).each(function (index, value) {
                            storiessselector.push('[data-stories=' + value + ']');
                        });
                        //console.log('.listing-wrap'+storiessselector.join(''));   
                    }
    
    
                    console.log('.listing-wrap' + bedsselector.join(',') + bathsselector.join(','));
                    $(".listing-wrap").hide();
    
                    console.log($('.listing-wrap').filter(bathsselector.join()));
                    $('.listing-wrap' + garagesselector.join(',') + bedsselector.join(',') + bathsselector.join(',') + halfbathssselector.join(',') + garagesselector.join(',') + storiessselector.join(',')).show('slow');
                });
                clearfilter = function () {
                    $('.filter').attr('checked', false);
                    $(".listing-wrap").show("slow");
                }
            });
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div class="col col-sm-3 col-md-3">
    <div class="clear_btn_section"><button class="btn btn-default " onclick="clearfilter();">Clear Filter</button></div>
    <div class="clearfix clear-fix"></div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Bedrooms</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="beds" value="1"/>  <span> 1 Bedroom</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="2"/>  <span> 2 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="3"/>  <span> 3 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="4"/>  <span> 4 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="5"/>  <span> 5 Bedrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="beds" value="6"/>  <span> 6 Bedrooms</span></label>
        </div>
    </div>
    </div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Bathrooms</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="1"> <span>1 Bathroom</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="2"> <span>2 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="3"> <span>3 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="4"> <span>4 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="5"> <span>5 Bathrooms</span></label>
            <label><input type="checkbox" class="filter" data-filter="baths"/ value="6"> <span>6 Bathrooms</span></label>
        </div>
    </div>
    </div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Halfbath</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="1"><span> 1 Halfbath</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="2"><span> 2 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="3"><span> 3 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="4"><span> 4 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="5"><span> 5 Halfbaths</span></label>
            <label><input type="checkbox" class="filter" data-filter="halfbath"/ value="6"><span> 6 Halfbaths</span></label>
        </div>
    </div>
    </div>
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Garages</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="garages" value="1"/><span> 1 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="2"/><span> 2 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="3"/><span> 3 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="4"/><span> 4 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="5"/><span> 5 Cars</span></label>
            <label><input type="checkbox" class="filter" data-filter="garages" value="6"/><span> 6 Cars</span></label>
        </div>
    </div>
    </div>
    
    <div class="filter_models">
    <div class="panel panel-default">
    <div class="panel-heading"><i class="fa fa-filter"></i>&nbsp;Stories</div>
        <div class="panel-body">
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="1"><span> 1 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="2"><span> 2 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="3"><span> 3 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="4"><span> 4 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="5"><span> 5 Stories</span></label>
            <label><input type="checkbox" class="filter" data-filter="stories"/ value="6"><span> 6 Stories</span></label>
        </div>
    </div>
    </div>
    <div class="clearfix clear-fix"></div>
    </div>
    <div class="wp-listings-shortcode col col-sm-8 col-md-8">
        <div data-baths="3" data-beds="4" data-halfbath="12" data-garages="2" data-stories="2" data-price="2" data-sqft="2567" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Lexington</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">4<span>Beds</span></li>
                    <li class="baths">3<span>Baths</span></li>
                    <li class="baths">12<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,567<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">2<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="4" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2701" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Everest</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">4<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,701<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2126" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Fairmont</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,126<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft="3732" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Elkton</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3,732<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">2<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1784" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Belmont</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">1,784<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1698" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Audrey</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">1,698<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="3" data-stories="1" data-price="" data-sqft="3450" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Aspen</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3,450<span>Sqft Footage</span></li>
                    <li class="baths">3<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="3" data-beds="5" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft="    3718" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Alpine</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">5<span>Beds</span></li>
                    <li class="baths">3<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3,718<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">2<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2195" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Alexander</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,195<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="1000" data-sqft="2100" class="listing-wrap one-third first col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Camden</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">2<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">2,100<span>Sqft Footage</span></li>
                    <li class="baths">2<span>Garages</span></li>
                    <li class="baths">1<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="4" data-beds="3" data-halfbath="-" data-garages="-" data-stories="-" data-price="100" data-sqft="50" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">model two</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">3<span>Beds</span></li>
                    <li class="baths">4<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">50<span>Sqft Footage</span></li>
                    <li class="baths">-<span>Garages</span></li>
                    <li class="baths">-<span>Stories</span></li>
                </ul>
            </div>
        </div>
        <div data-baths="-" data-beds="-" data-halfbath="-" data-garages="-" data-stories="-" data-price="" data-sqft="452136" class="listing-wrap one-third col col-md-3 col-sm-3">
            <div class="listing-widget-details">
                <h3 class="listing-title">Model One</h3>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">-<span>Beds</span></li>
                    <li class="baths">-<span>Baths</span></li>
                    <li class="baths">-<span>HalfBaths</span></li>
                </ul>
                <ul class="listing-beds-baths-sqft">
                    <li class="beds">452,136<span>Sqft Footage</span></li>
                    <li class="baths">-<span>Garages</span></li>
                    <li class="baths">-<span>Stories</span></li>
                </ul>
            </div>
        </div>
    </div>
        </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Brando

    Wednesday, October 19, 2016 3:18 AM