Прибираємо частину контенту під кат за допомогою спойлера

Буває, що частину контенту на сторінці сайту треба прибрати під кат (тобто сховати від просмотру) та зробити доступним при натисканні на кнопку. Наприклад, платіжні реквізити, ліцензійні угоди, договір оферти тощо. Вирішити таку задачу можна організацією спойлера з подією onclick.

Подія onclick виникає при натисканні лівою кнопкою миші на елементі (наприклад, на простій кнопці), до якого додано атрибут onclick.

Якщо треба організувати складнішу подію, ніж просто перехід по натисканню кнопочки (таку, що визначається скриптом), то синтаксис буде таким: onclick="скрипт".

Розглянемо приклад організації спойлеру на сторінці сайту з відкриттям додаткового тексту при натисканні на кнопку. 

Виглядає та працює він таким чином:

---

Текст, який ви пишите в середині спойлеру для того, щоб його розгортати та згортати. Це може бути лицензійна угода чи проєкт договору, платіжні реквізити, пояснення матеріалу тощо

---

Html код достатньо вставити на необхідне місце в сайті. Там, де виділення жовтим маркером, ви вставляєте свій текст.

<div class="spoil">

    <input class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Згорнути'; } 

else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Переглянути ще раз'; }" type="button" value="Натиснить на кнопку щоб переглянути додаткові матеріали" />

</div>

<div class="alt2">

    <div style="display: none;"><br>Текст, який ви пишите в середині спойлеру для того, щоб його розгортати та згортати. Це може бути лицензійна угода чи проєкт договору, платіжні реквізити, пояснення матеріалу тощо </div> 

</div>

---