Slide Div Element from Right to Left when a Condition is True

298 views Asked by At

I have a div element which is the position:fixed, height:300px, width:200px and display:none. And also I have a text field for filter data from database. When I click on one filtered data from the list, that data item is displayed on the text field. The data filtering process working fine but the problem is I want the div to slide from right to left when I clicked on filtered data item from the list and also I want that div to slide left to right after I deleted the item from the text field (empty field). Simply I want to slide a div from right to left and left to right based on a condition.

HTML

<div id="search">
    <input type="text" name="searchData" id="searchData" class="searchData">
    <div class="show-data"></div> <!-- filter-data-list -->
</div>

<div id="div-slide" class="bg-light"></div> <!-- div-slide -->

CSS

div#div-slide {
    height: 300px; 
    width: 200px;
    position: fixed;
    right: 30px;
    bottom: 10px;
    display: none;
    overflow: hidden;
}

JS

$(document).on('click','li#show-list', function(){
$("#searchData").val($(this).text());
$(".show-data").fadeOut();

$("#div-slide").animate({
  width: "toggle"
});
});

 $(document).on('click','li#show-list', function(){
    $("#searchData").val("");
    $(".show-data").fadeOut();

    $("#div-slide").animate({
     width: "0"
   });
});

The <li> element is dynamically created in the db coding section and with my JS code, the div slides perfectly the first time I click on filtered data item, but when I click on second time it slides back to left to right (hides) because of toggle. I want the div to remain visible when an item display in text field and hide div when no data appears in text field.

0

There are 0 answers