Я знаю, что это должно быть просто, но я не программист и провел дюжину часов, пытаясь сделать что-то, что должно быть простым.У меня есть несколько тем, которые мне нужно расширить или свернуть (аккордеон).
Я обнаружил, что на этом сайте использование Summary-Details должно работать, и это работает, но в обратном направлении.Он отлично работает при разработке моего блога, но при входе на страницу все детали раскрываются по умолчанию, что лишает цель пытаться сделать страницу менее загроможденной.
Вот код, который я использую и который имеет некоторое форматирование, которое делает его уродливым.
<details open="">
<summary style="text-align: left;"><span style="font-family:
"arial" , "helvetica" , sans-serif;"><b>Summary Goes
Here</b><span style="font-size: xx-small;">(details)</span></span>
</summary>
<div style="text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-
serif;">Detail Content Goes Here</span>
</div>
</details>
Я проверил это с помощью Chrome (для ПК и мобильных устройств) и Safari, оба сте же результаты.