javascript - How to slide up only one card box at once from lists of cards?

Question

Here are the code for my website which look like this :

My CSS Look like this :

/** Card View ***/
.list-items {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.list-items .card{
    width: 18%;
    margin: 10px;
    background: #262626;

    position: relative;
    display: block;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
    transition: 0.4s linear;
}
.card:hover{
    box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.card .image{
    background: black;
    overflow: hidden;
}
.card .image img{
    height: 100%;
    width: 100%;
    transition: 0.3s;
}
.card.active .image img{
    opacity: 0.6;
    transform: scale(1.1);
}
.card .content{
    position: absolute;
    border: none;
    bottom: 0px;
    background: #262626;
    width: 100%;
    padding: 10px;
}
.content .title{
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.content .category{
    color: #04e0b2;
    font-size: 12px;
}
.content .bottom{
    margin-top: 5px;
}
.content .bottom button{
    width: 100%;
    border: none;
    background: #04e0b2;
    color: #ffffff;
    font-weight: 800;
    padding: 8px 0px;
    transition: 0.3s ease;
    cursor: pointer;
}
.content .bottom button:hover{
    transform: scale(0.9);
}
.content .bottom{
    display: none;
}

Here is the HTML

<div class="list-items">
    <div class="card">
        <div class="image">
            <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
        </div>
        <div class="content">
            <div class="title">Dory's Reef Cam</div>
            <div class="category">Family, Animation, Comedy, Adventure</div>
            <div class="bottom">
                <button>Play</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="image">
            <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
        </div>
        <div class="content">
            <div class="title">Dory's Reef Cam</div>
            <div class="category">Family, Animation, Comedy, Adventure</div>
            <div class="bottom">
                <button>Play</button>
            </div>
        </div>
    </div>
</div>

Javascript look like this :

//Card Hover
$('.card').hover(function(){
    if($(this).hasClass('active')){
        $('.card .bottom').slideUp(function(){
            $('.card').removeClass('active');
        });
    }else{
        $('.card').addClass('active');
        $('.card .bottom').stop().slideDown();
    }
});

Its Slide up all cards lists items all at once I want to know how to implement it for single item at once!

Is there any way to hover the single item and its slide up like this only but for single item only!

Answer 1

Use this to refer the hovered card

//Card Hover
$('.card').hover(function(){
$(this).toggleClass('active');
        $(this).find('.bottom').slideToggle();
});

/** Card View ***/
.list-items {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.list-items .card{
    width: 18%;
    margin: 10px;
    background: #262626;

    position: relative;
    display: block;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
    transition: 0.4s linear;
}
.card:hover{
    box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.card .image{
    background: black;
    overflow: hidden;
}
.card .image img{
    height: 100%;
    width: 100%;
    transition: 0.3s;
}
.card.active .image img{
    opacity: 0.6;
    transform: scale(1.1);
}
.card .content{
    position: absolute;
    border: none;
    bottom: 0px;
    background: #262626;
    width: 100%;
    padding: 10px;
}
.content .title{
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.content .category{
    color: #04e0b2;
    font-size: 12px;
}
.content .bottom{
    margin-top: 5px;
}
.content .bottom button{
    width: 100%;
    border: none;
    background: #04e0b2;
    color: #ffffff;
    font-weight: 800;
    padding: 8px 0px;
    transition: 0.3s ease;
    cursor: pointer;
}
.content .bottom button:hover{
    transform: scale(0.9);
}
.content .bottom{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-items">
    <div class="card">
        <div class="image">
            <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
        </div>
        <div class="content">
            <div class="title">Dory's Reef Cam</div>
            <div class="category">Family, Animation, Comedy, Adventure</div>
            <div class="bottom">
                <button>Play</button>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="image">
            <img src="https://www.themoviedb.org/t/p/w220_and_h330_face/mMWLGu9pFymqipN8yvISHsAaj72.jpg">
        </div>
        <div class="content">
            <div class="title">Dory's Reef Cam</div>
            <div class="category">Family, Animation, Comedy, Adventure</div>
            <div class="bottom">
                <button>Play</button>
            </div>
        </div>
    </div>
</div>