JSFiddle - React, Tailwind, and code Playground

by tps20

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="thumbnails">
                        
	

<div class="images-additional">
  <div class="images-additional-arr-up" onclick="up('images-additional_wrapper',200);"><i class="fa fa-angle-up" aria-hidden="true"></i></div>
  <div class="images-additional-arr-down" onclick="down('images-additional_wrapper',200);"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
                                <div class="images-additional_wrapper" id="images-additional_wrapper" style="margin-top: 0px;">
    								    									<a class="thumbnail" href="https://fitfilip.ru/image/cache/catalog/петли fitfil/2024/grey/petli_rezinka_grey_1-900x1200.jpg" title="Фитнес резинка нагрузка 1-7 кг Grey ">
    										<img src="https://fitfilip.ru/image/cache/catalog/петли fitfil/2024/grey/petli_rezinka_grey_1-70x90.jpg" title="Фитнес резинка нагрузка 1-7 кг Grey " alt="Фитнес резинка нагрузка 1-7 кг Grey " data-number="0">
    									</a>
    								    								    								
			   
    									<a class="thumbnail" href="https://fitfilip.ru/image/cache/catalog/петли fitfil/2024/grey/petli_rezinka_grey_2-900x1200.jpg" title="Фитнес резинка нагрузка 1-7 кг Grey ">
    										<img src="https://fitfilip.ru/image/cache/catalog/петли fitfil/2024/grey/petli_rezinka_grey_2-70x90.jpg" title="Фитнес резинка нагрузка 1-7 кг Grey " alt="Фитнес резинка нагрузка 1-7 кг Grey " data-number="1">
    									</a>

			    
    									    								
			   
    									<a class="thumbnail" href="https://fitfilip.ru/image/cache/catalog/петли fitfil/2024/grey/petli_rezinka_grey_3-900x1200.jpg" title="Фитнес резинка нагрузка 1-7 кг Grey ">
    										<img src="https://fitfilip.ru/image/cache/catalog/петли fitfil/2024/grey/petli_rezinka_grey_3-70x90.jpg" title="Фитнес резинка нагрузка 1-7 кг Grey " alt="Фитнес резинка нагрузка 1-7 кг Grey " data-number="2">
    									</a>

			    
    									   ...

CSS

.prod_card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prod_name{display: none;}
.thumbnails {
	background: #fff;
	margin-bottom: 0px;
    /*display: none;*/
    display: flex;
    width: max-content;
}
.thumbnails .main-image-wrapper{
	text-align: center;
	margin-bottom: 0px;
    width: 500px;
}
.thumbnails .main-image{
	display: block;
	
}
.images-additional {
	text-align: left;
	font-size: 0;
	margin-left: -5px;
    height: 600px;
    overflow: hidden;
    position: relative;
}
.images-additional_wrapper{
    display: block;
    transition: all ease .3s;
}
.images-additional-arr-up,.images-additional-arr-down{
    position: absolute;
    z-index: 2;
    left: 54%;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    background: #fff;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}
.images-additional-arr-up{
    top: 7%;
    transition: all ease 0.3s;
    opacity: 0.9;
}
.images-additional-arr-down{
    bottom: -2%;
    transition: all ease 0.3s;
    opacity: 0.9;
}
.images-additional-arr-up:hover,.images-additional-arr-down:hover{
    box-shadow: inset 0 0 3px 2px #c0e0f7;
    opacity: 1;
}
.images-additional-arr-up .fa{
    font-size: 30px;
    padding-top: 6px;
}
.images-additional-arr-down .fa {
    font-size: 30px;
    padding-top: 9px;
}
.images-additional .thumbnail{
	display: block;
    margin-left: 5px;
    margin-bottom: 5px;
    width: 80px;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa {
    color: #0591bf;
}

JavaScript

$( document ).ready(function() {
  if($('#images-additional_wrapper').css("margin-top")=='0px') {
       return false;
    }
});

    function down(id,h) {
    $('#images-additional_wrapper').animate({
        'margin-top' : '-=' + h + 'px'
    })
    if($('#images-additional_wrapper').css("margin-top")<'0px') {
       return false;
    }
};

function up(id,h) {
    $('#images-additional_wrapper').animate({
        'margin-top' : '+=' + h + 'px'
    })
    if($('#images-additional_wrapper').css("margin-top")<'0px') {
       return false;
    }


};