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>