Toggle pure JS

  1. // Toggle (спойлер) на чистом JS
  2. // единственный минус,
  3. // нельзя задавать стиль , кроме нуля,
  4. // padding, margin, border
  5. <button onclick="toggle(document.getElementById('toggle'));return false;">Button</button> ::
  6. <input onclick="toggle(document.getElementById('toggle'));return false;" type="button" value="Input"> ::
  7. <a onclick="toggle(document.getElementById('toggle'));return false;" href="javascript://">Link</a>
  8. <div id="toggle" class="toggle" style="display: none;">
  9.     CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа,
  10.     написанного с использованием языка разметки.
  11.  
  12.     Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью
  13.     языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
  14. </div>
  15. <script language="JavaScript">
  16.     var getHeight = function (el) {
  17.         var el_style = window.getComputedStyle(el),
  18.             el_display = el_style.display,
  19.             el_position = el_style.position,
  20.             el_visibility = el_style.visibility,
  21.             el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''), wanted_height = 0;
  22.         if (el_display !== 'none' && el_max_height !== '0') {
  23.             return el.offsetHeight;
  24.         }
  25.         el.style.position = 'absolute';
  26.         el.style.visibility = 'hidden';
  27.         el.style.display = 'block';
  28.  
  29.         wanted_height = el.offsetHeight;
  30.         el.style.display = el_display;
  31.         el.style.position = el_position;
  32.         el.style.visibility = el_visibility;
  33.  
  34.         return wanted_height;
  35.     }, toggle = function (el) {
  36.         var el_max_height = 0;
  37.         if (el.getAttribute('data-max-height')) {
  38.             if (el.style.maxHeight.replace('px', '').replace('%', '') === '0') {
  39.                 el.style.maxHeight = el.getAttribute('data-max-height');
  40.             } else {
  41.                 el.style.maxHeight = '0';
  42.             }
  43.         } else {
  44.             el_max_height = getHeight(el) + 'px';
  45.             el.style['transition'] = 'max-height 0.5s ease-in-out';
  46.             el.style.overflowY = 'hidden';
  47.             el.style.maxHeight = '0';
  48.             el.setAttribute('data-max-height', el_max_height);
  49.             el.style.display = 'block';
  50.             setTimeout(function () {
  51.                 el.style.maxHeight = el_max_height;
  52.             }, 10);
  53.         }
  54.     };
  55. </script>

Мы в соцсетях

vk tw tg yt

Пожертвования

Аноним2850 р.
Freddy1700 р.
riseremi1611 р.
NaruTrey800 р.
vlavolk637 р.