MediaWiki:Test.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

$(document).ready(function () {
  // Устанавливаем границу и цвет текущего блока
  $('.recipe-card').each(function () {
    var $card = $(this);
    var borderColor = $card.data('border');
    var substanceColor = borderColor || '#81d4fa';

    // рамка карточки
    $card.css('border-color', borderColor);

    // название вещества (цвет текста и underline)
    var $sub = $card.find('.card-substance');
    $sub.text($card.data('substance'));
    $sub.css('color', substanceColor);

    // цвет линии под заголовками
    $card.find('.collapsible-header').css('color', substanceColor);
  });

  // Клик по заголовку — раскрытие контента
  $('.collapsible-header').click(function () {
    var $hdr = $(this);
    var $content = $hdr.next('.collapsible-content');

    $content.toggleClass('show');
    if ($content.hasClass('show')) {
      $content.css('max-height', $content.get(0).scrollHeight + 'px');
      // анимация элементов
      $content.find('li').each(function (i) {
        $(this)
          .css('animation-delay', (i * 0.1) + 's')
          .addClass('visible');
      });
    } else {
      $content.css('max-height', '0');
    }
    $hdr.toggleClass('open');
  });
});