Тег Details в HTML5 и реализация jQuery

Последнее обновление Фев 1, 2023

HTML5

Согласно W3school, в HTML5 добавлен новый тег, детали. Его пример использования:

<details>
  <summary>Computing & Technology.</summary>
  <a class="vglnk" target="_blank" href="https://helloacm.com" rel="nofollow"><span>https</span><span>://</span><span>helloacm</span><span>.</span><span>com</span></a>
</details>

Если ваш браузер поддерживает HTML5 и поддерживает этот тег, вы увидите следующую работу (расширяемый тег, нажмите, чтобы переключить отображение и скрытие, удалено из-за того, что AMP не поддерживает эти теги HTML5 ):

▶ Computing & Technology.

К сожалению, не все браузеры поддерживают это, например браузеры Microsoft IE или Edge. Но вы всегда можете использовать jQuery (или чистый javascript) для достижения тех же эффектов (как минимум на 99%).

▶ Компьютеры и технологии.

Исходный код:

jQuery(document).ready(function() {
  jQuery('#example_label1').click(function() {
     jQuery('#example_d1').toggle();
  });
});

Определены два элемента HTML div: example_label1 и example_d1. Квадраты треугольника Юникода справа обращены вниз, но это не учитывается в этой простой замене jQuery .

Похоже, вы используете блокировщик рекламы. Но без дохода от рекламы мы не сможем продолжать делать этот сайт потрясающим. Я понимаю, что отключил блокировщик рекламы.

Источник записи: helloacm.com