Filter and search div text by ul li click

When you click the li, the div's below should be filtered based on the selected li data values. This is working but for some reason, when you first load the page you have to click an li twice for the filter to work.

Codepin Example

<div class="dropdown">
    <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>

    <ul id='filterFloorplans' onClick='filterFloorplans()' class="btn dropbtn">
        <li data-value="1" class="dropdown-option">1 Bedroom</li>
        <li data-value="2" class="dropdown-option">2 Bedrooms</li>
        <li data-value="all" class="dropdown-option">all</li>
    </ul>
</div>

<div class="floorplanscontainer">
    <div class="unit">1 bedroom</div>
    <div class="unit">1 bedroom</div>
    <div class="unit">2 bedrooms</div>
</div>


<script>

    function filterFloorplans()
    {
        $('.dropdown-option').click(function () {
            var theValue = $(this).attr('data-value');

            var rex = new RegExp(theValue);

            if(rex =="/all/"){
                clearFilter()
            }else{
                $('.unit').hide();

                $('.unit').filter(function() {
                    return rex.test($(this).text());
                }).show();
            }
             $('.dropdown ul.on').removeClass("on");
        });
    }

    function clearFilter()
    {
        $('.filterFloorplans').val('');
        $('.unit').show();
    }

    $('.selectBedrooms').click(function () {
        $('.dropdown ul').toggleClass("on");
    });

</script>

Solution

for some reason, when you first load the page you have to click an li twice for the filter to work.

That because the first click will attach the click event and second will fire it.

You have to attach the event outside of the function and you don't need the function filterFloorplans() at all, remove the onClick :

 onClick='filterFloorplans()'

And define the click event out of the function, check the working example below.

Hope this helps.

$(function(){ //ready function

  $('.dropdown-option').click(function () {
    var theValue = $(this).attr('data-value');
    var rex = new RegExp(theValue);

    if(rex =="/all/"){clearFilter()}else{
      $('.unit').hide();

      $('.unit').filter(function() {
        return rex.test($(this).text());
      }).show();
    }

    $('.dropdown ul.on').removeClass("on");
  });

  function clearFilter()
  {
    $('.filterFloorplans').val('');
    $('.unit').show();
  }

  $('.selectBedrooms').click(function () {
    $('.dropdown ul').toggleClass("on");
  });
});

.dropdown ul li {
  width:100%;
  border:1px solid red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>
  <ul id='filterFloorplans' class="btn dropbtn">
    <li data-value="1" class="dropdown-option">1 Bedroom</li>
    <li data-value="2" class="dropdown-option">2 Bedrooms</li>
    <li data-value="all" class="dropdown-option">all</li>
  </ul>
</div>

<div class="floorplanscontainer">
  <div class="unit">1 bedroom</div>
  <div class="unit">1 bedroom</div>
  <div class="unit">2 bedrooms</div>
</div>