JQ Cut and show full

by vovkasolovev

HTML

<div class="cut" data-cut-ratio="0.3">
<img src="https://podhod.ru/images/ecosphere-15c/ecosphere-15c-landing.jpg">
</div>

<div class="cut">
<img src="https://podhod.ru/images/ecosphere-15c/ecosphere-15c-landing.jpg">
</div>

<div class="cut" data-cut-link="<h2><img src='https://podhod.ru/img/phone.png' style='width: inherit;'>Показать скрытый</h2>">
<img src="https://podhod.ru/images/ecosphere-15c/ecosphere-15c-members.jpg">
</div>

<div class="cut" data-cut-height="100">
<img src="https://podhod.ru/images/ecosphere-15c/ecosphere-15c-final.jpg">
</div>

<div class="cut-info">
<a class="button_link cut-link">Show third</a>
</div>

CSS

body{background: #f0f0f0}
img{width: 100%;}

.cut{display: none; position: relative;  padding: 1px 8px 0; margin: -1px -8px 0;}
.cut-part{box-shadow: 0 2px 1px -1px rgba(255,255,255,0.6);}
.cut-part:before, .cut-part:after{display: block;	content: ''; position: absolute;bottom: 0px;z-index:10; width: 100%; margin:auto; left:0; right:0; border-radius: 100%;} 
.cut-part:before{height: 5px;bottom: -6px; box-shadow: 0 2px 8px -2px black;}
.cut-part:after{height: 20px;bottom: -20px; box-shadow: 0 10px 40px -5px black;}

.cut-info{display:block; float:none !important; clear:both !important; text-align:center; grid-column-start: 1; grid-column-end: -1; position: relative; z-index:10; text-align:center; padding-bottom: 44px;}
.cut-link {display:inline-block;}
.cut-link .item {padding:20px 40px; border: 3px #0077ff solid; box-sizing: border-box; border-radius: (--radius);}

.cut-link-handle{width:42px; height:42px; background: #0077ff; position:absolute; margin-left:-21px; top:-21px; border-radius: 100%;cursor:pointer; outline: none; box-shadow: 0 0px 0px 1px rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.3);}
.cut-link-handle:before{top: 50%; border: solid transparent; content: ""; height: 10px; width: 10px; position: absolute; pointer-events: none; border-width: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.cut-link-handle:before{left: 0; right:0; margin:auto; border-top-color: #ffffff; margin-top:-8px;}
.cut-link-handle:hover{background: #11bb88; box-shadow: 0 0px 0px 1px rgba(255,255,255,0.6), 0 5px 25px rgba(0,255,119,1);}
.cut-link-handle:active{background:#ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 0 2px #0077ff inset;}
.cut-link-handle:active:before{border-color: #0077ff;}
.cut-link-handle:after{content: ""; display: block; float: left; position: absolute; border-radius: 100%; padding: 42px; transform: scale(.5); transform-origin: center; animation-iteration-count: infinite; top: -50%;...

JavaScript

function cut_open($cutlink) { //Функция ещё используется в коде вывода портфолио если мало работ попадает под кат.
	
	$('#work:not(.show) .cut').css('display', 'contents'); //Кат в листингах портфолио, т.е. кроме просмотра самой работы
	
	var index = $cutlink.attr('class').match(/cut-link-(\d+)/)[1]
	if ($('.cut-' + index).is(":visible")) {
		$('.cut-' + index).animate({
		height: $('.cut-' + index).get(0).scrollHeight
		}, 600, function() {
		$(this).css({
			'height': 'auto',
			'overflow': 'initial'
			});
		}).addClass('cut-none').removeClass('cut-part cut-full');
	} else {
		$('.cut-' + index).slideDown(600).addClass('cut-none').removeClass('cut-part cut-full');
	}
	
	$('body:not(#work.index) .cut-info-' + index).slideUp(600);
}


$(document).ready(function() {
	$('.cut').hide();
	$('.cut-info').show();
	$('.cut').each(function(index, element) {
		$(element).addClass('cut-' + index);
		ratio = 0;
		height = 0;
		
		if ($(element).data("cut-ratio")) {
			ratio = $(element).data("cut-ratio");
			height = $(element).width() * ratio;
			$(element).addClass('cut-part');
			$(element).css({
			'height': height,
			'display': 'block',
			'overflow': 'hidden'
			});
		} else if ($(element).data("cut-height")) {
			height = $(element).data("cut-height");
			$(element).addClass('cut-part');
			$(element).css({
			'height': height,
			'display': 'block',
			'overflow': 'hidden'
			}); 
		} else {
			$(element).addClass('cut-full');
		};
      
		if ($(element).next().hasClass('cut-info')) {
			$(element).next().addClass('cut-info-' + index).find('.cut-link').addClass('cut-link-' + index);
		} else {
			if ($(element).data("cut-link")) {
				$(element).after('<div class="cut-info cut-info-' + index + '"><a class="button_link cut-link cut-link-' + index + '">' + $(element).data("cut-link") + '</a></div>');
			} else {
				$(element).after('<div class="cut-info cut-info-' + index + '"><a class="cut-link cut-link-handle cut-link-' + index + '"...