April 12, 2023
Показ скрытых секций по клику
Видеоинструкция: https://www.youtube.com/watch?v=3yvDzyxlKV4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<script src="https://onthewaytothesun.ru/projects/web/getscript/hiddenBlocksTaplink.min.js">
</script>
<style>
body,.block-item {
position:relative;
}
.set-hidden-blocks {
position:absolute;
right:0;
top:0;
padding: .8rem 1.2rem;
background: #f8f8f8;
border-radius: .6rem;
box-shadow: 0px 69px 19px 0px rgba(0, 0, 0, 0.00), 0px 44px 18px 0px rgba(25, 199, 122, 0.01), 0px 25px 15px 0px rgba(25, 199, 122, 0.05), 0px 11px 11px 0px rgba(25, 199, 122, 0.09), 0px 3px 6px 0px rgba(25, 199, 122, 0.10);max-width: 50vw;
z-index: 10;
}
.copy-pls {
cursor:pointer;
}
.result-code {
position:fixed;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
bottom:20px;
z-index:1000;
width:350px;
gap:10px;
padding: .8rem 1.2rem;
background: #f8f8f8;
border-radius: .6rem;
box-shadow: 0px 69px 19px 0px rgba(0, 0, 0, 0.00), 0px 44px 18px 0px rgba(25, 199, 122, 0.01), 0px 25px 15px 0px rgba(25, 199, 122, 0.05), 0px 11px 11px 0px rgba(25, 199, 122, 0.09), 0px 3px 6px 0px rgba(25, 199, 122, 0.10);
}
.result-code button {
width:100px;
}
.flex {display:flex;}
.flex-column {flex-direction:column;}
.set-hidden-blocks {
display:flex;
}
.flex-end {align-items:flex-end;}
.hidden {display:none!important;}
@media (max-width:480px) {
.result-code {
bottom:40px;
}
}
.blocks-section.toggled:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath d='M0 6l6-6M-.75.75l1.5-1.5m4.5 7.5l1.5-1.5' stroke='red'/%3E%3C/svg%3E")
}
.toggled:hover:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath d='M0 6l6-6M-.75.75l1.5-1.5m4.5 7.5l1.5-1.5' stroke='black'/%3E%3C/svg%3E");
opacity:.2;
}
.blocks-section.toggled:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .7;
z-index: 0;
background-size: 4px;
transition:.3s;
pointer-events:none;
}
</style>
<script>
fadeIn = (el, timeout, display) => {
el.style.opacity = 0;
el.style.display = display || 'block';
el.style.transition = `opacity ${timeout}ms`;
setTimeout(() => {
el.style.opacity = 1;
}, 10);
};
fadeOut = function (el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
};
showBlock = function (selector) {
let $block = document.querySelector(selector).closest('.blocks-section'),
display = $block.style.display;
if (display==='none') fadeIn($block, 1000, 'block')
else fadeOut($block)
}
</script>