JSFiddle - React, Tailwind, and code Playground

by A1ex5andr

HTML

<div class="advSearch">
           <span class="advSearch-btn">Advanced Search</span>
          <div class="advSearch-container">
            <div class="col left">
              <h3>Customer</h3>
              <form action="">
                <label><h4>First Name</h4> <input type="text"> </label>
                <label><h4>Last Name</h4> <input type="text"> </label>
                <label><h4>Email</h4> <input type="text"> </label>
                <label><h4>Phone</h4> <input type="text"> </label>
              </form>
            </div>
            <div class="col central">
              <h3>Address</h3>
              <form action="">
                <label><h4>Adsress</h4> <input type="text"> </label>
                <label><h4>City</h4> <input type="text"> </label>
                <label><h4>State</h4> <input type="text"> </label>
                <label><h4>Zip</h4> <input type="text"> </label>
              </form>
            </div>
            <div class="col right">
              <h3>Other</h3>
               <form action="">
                <label><h4>Policy</h4> <input type="text"> </label>
                <label><h4>App ID</h4> <input type="text"> </label>
                <label><h4>Quote</h4> <input type="text"> </label>
                <label><h4></h4> <input type="text"> </label>
              </form>
            </div>
          <div class="advSearch-control">
            <button class="canc">Cancel</button>
            <button class="srch">Search</button>
          </div>
          </div>
        </div>

CSS

/* advanced search */
 .advSearch {
    float: right;
    position: relative;
    margin: 20px 40px 0 0;
}
 .advSearch .advSearch-btn {
    color: #0b77c2;
    z-index: 99;
    position: relative;
    font-size: 13px;
    cursor: pointer;
 }
 .advSearch {
    padding: 10px;
/*    background: #e3e4e5;
    border: 1px solid #9aa7b3;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;*/
}

.advSearch-container {
    display: none;
    position: absolute;
    background: #F3F3F3;
    width: 922px;
    height: 268px;
    right: 0;
    top: 0;
    border: 1px solid ##6B6B6B;
}

.advSearch-container .col {
    padding: 40px 0;
    width: 33.33333333333333%;
    display: inline-block;
    margin: 0;
    float: left;
    box-sizing: border-box;
}
.advSearch-container .col h3 {
    color: #0b77c2;
    font-size: 18px;
    margin: 0;
    padding: 2px 19px;
    font-weight: 100;
}
.advSearch-container .col label {
    clear: both;
    display: block;
}
.advSearch-container .col form {
    margin-top: 14px;
}
.advSearch-container .col input {
    width: 180px;
    height: 27px;
    outline: 0;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    padding-left: 6px;
}
.advSearch-container .col h4 {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 70px;
    font-size: 12px;
    padding-left: 20px;
    color: #6e6e6f;
    padding-bottom: 10px;
    font-weight: 100;
}
.advSearch-container .left form {
    border-right: 1px solid #d2d2d2;
}

.advSearch-container .central form {
    border-right: 1px solid #d2d2d2;
    border-left: 1px solid #f7f7f8;
}
.advSearch-container .right form {
    border-left: 1px solid #f7f7f8;
}

.advSearch-control {
    position: absolute;
    right: 30px;
    bottom: 16px;
}
.advSearch-control .canc {
    border: 0;
    background: transparent;
    color: #0b77c2;
    outline: 0;
    display: none;
}
.advSearch-control .srch {
    padding-left: 30px;
    background: #0b77c2;
    color: #fff;
    border: 0;
    height:...

JavaScript

// advanced search show/hide and buttons callBack
    var container = $(".advSearch-container");
    // Bind the link to toggle the slide.
    var slideAdvancedSearch = function() {
        // Toggle the slide based on its visibility
        if (container.is(":visible")) {
            // Hide - slide up.
            $('.canc').css('display', 'none');
            $('.srch').css('display', 'none');
            container.slideUp(1000);
        } else {
            // Show - slide down.
            container.slideDown(1000, function() {
                $('.canc').css('display', 'inline-block');
                $('.srch').css('display', 'inline-block');

                // $(document).click(function() {
                //     if (container.is(":visible")) {
                //         container.fadeOut(300);
                //     } else {
                //         e.stopPropagation();
                //         console.log('its stoped');
                //     }
                // });
                
                // $(document).click(function(event) {
                //     if ($(event.target).parents().index(container) == -1) {
                //         if (container.is(":visible")) {
                //             container.hide()
                //         }
                //     }
                // })
                
            });
        }
    };

    //run slide on AdvSearch button
    $(".advSearch-btn").click(function() {
        slideAdvancedSearch();
    });

    //run slide on Cancel button
    $('.canc').click(function(event) {
        slideAdvancedSearch();
    });

    // Modified Date sort arrow
    var sortArrow = $('.sortArrow');
    sortArrow.click(function(event) {
        $(this).toggleClass('up');
    });