Such a question, there is a link, clicking on it from the bottom opens a new block (hidden_content), but opens "sharply", how can you establish the smoothness of the opening?

<script> function toggle(el) { el.style.display = (el.style.display == 'none') ? '' : 'none' } </script> <a onclick="toggle(hidden_content)"><h1 class="hidden">Ссылка</h1></a> <div id="hidden_content" style="display: none;"> контент (открывающийся блок) </div>

2 answers 2

You can use the jquery library if you are a beginner and do not want to be a block. There just is a method. toggle (200) ; where the argument is the animation time in ms, there are also methods. slideToggle () and. toggleClass (". hidden") , in the latter case it is easy to write your own animation:

 .element-to-toggle{ display:block; transition:display, 0.3s, ease-in; } .element-to-toggle.hidden{ display:none; } 
     let toggle = function (el, time) { el = document.getElementById(el); if(el.style.display !== 'none'){ el.style.opacity = 1; let setFade = function(){ el.style.transitionDuration =time+'s'; el.style.opacity:0; let dropIt = function(){ el.style='display:none;'; } setTimeOut(dropIt, time+'000'); }; setTimeout(setFade,1); } }

    and back by analogy;

    but if you really want to implement not using # bydlokod then use css and a simple script for toogle "

      let toogleClass = function(el, fromclass, toclass){ el = document.getElementById(el); cC = el.getAttribute('class'); if(cC === toclass) el.classname = fromclass; else if(cC === fromclass)el.classname = toclass; };