Passengers Select

by James Goodwin

HTML

<div class="input-holder passengers">
    <input id="seats" class="focus-input passengers-main-dropdown" readonly type="text" value="1 пассажир">
    <label for="seats" class="place-label">Пассажиры</label>
    <span class="drop-down"></span>
    <span class="icon"><i class="material-icons">airline_seat_recline_normal</i></span>
    <div class="passengers-list dropdown-box">
        <div class="lists-content">
            <div class="list-item">
                <span class="list-name" data-description="Старше 12 лет">Взрослые</span>
                <div class="numeric-selector">
                    <a class="minus"><i class="material-icons">remove</i></a>
                    <input id="adult-counter" type="number" class="numeric-input" min="1" max="9" readonly value="1">
                    <a class="plus"><i class="material-icons">add</i></a>
                </div>
            </div>
            <div class="list-item">
                <span class="list-name" data-description="От 2 до 12 лет">Подростки</span>
                <div class="numeric-selector">
                    <a class="minus"><i class="material-icons">remove</i></a>
                    <input id="teen-counter" type="number" class="numeric-input" min="0" max="8" readonly value="0">
                    <a class="plus"><i class="material-icons">add</i></a>
                </div>
            </div>
            <div class="list-item">
                <span class="list-name" data-description="До 2 лет">Младенцы</span>
                <div class="numeric-selector">
                    <a class="minus"><i class="material-icons">remove</i></a>
                    <input id="kid-counter" type="number" class="numeric-input" min="0" max="2" readonly value="0">
                    <a class="plus"><i class="material-icons">add</i></a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.passengers-list {
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.04);
    border-radius: 0 0 4px 4px;
    -webkit-transition: opacity .25s, ease-out, visibility .25s, transform .25s;
    transition: opacity .25s, visibility .25s, transform .25s;
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}
.passengers-list.active {
    z-index: 10;
    visibility: visible;
    opacity: 1;
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.passengers-list .lists-content {
    position: relative;
    overflow: hidden;
    z-index: 12;
    background: #fff;
    padding: 18px;
    border-radius: 0 0 4px 4px;
}
.passengers-list .lists-content > .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 12px;
}
.passengers-list .lists-content > .list-item > .list-name {
    position: relative;
    font-size: 0.825rem;
    text-align: left;
}
.passengers-list .lists-content > .list-item > .list-name:after {
    position: relative;
    content: attr(data-description);
    font-size: 0.6rem;
    display: block;
    color: #9e9e9e;
}
.passengers-list .lists-content > .list-item > .numeric-selector {
    position: relative;
    font-size: 0;
    padding: 2px 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.passengers-list .lists-content > .list-item > .numeric-selector a {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    color: #e0e0e0;
    -webkit-transition: all .25s;
    transition: all .25s;
}
.passengers-list .lists-content >...

JavaScript

$(() => {
    let dropdown = $('.passengers-main-dropdown');
 
    dropdown.on('click', function(){
        $(this).toggleClass('active');
        $(this).nextAll('.dropdown-box').toggleClass('active');
    });
 
    $('body').on('click', function(e){
        let drop = $('.dropdown-box');
        if(!dropdown.is(e.target) && dropdown.has(e.target).length !== 0 && drop.has(e.target).length !== 0) {
            drop.removeClass('active');
            dropdown.removeClass('active');
        }
    })
});