Spaces:
Sleeping
Sleeping
File size: 4,449 Bytes
c31af01 5651826 d763333 c31af01 d763333 c31af01 5651826 d763333 2dd5fbe 5651826 d763333 c31af01 d763333 c31af01 d763333 c31af01 619704e c31af01 4e7cf82 c31af01 4e7cf82 c31af01 4e7cf82 c31af01 5651826 619704e c31af01 4e7cf82 c31af01 4e7cf82 c31af01 619704e c31af01 4e7cf82 c31af01 4e7cf82 c31af01 5651826 619704e c31af01 4e7cf82 c31af01 4e7cf82 c31af01 5651826 105b815 5651826 064c0e4 5651826 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<style>
/* УНИВЕРСАЛЬНЫЕ СТИЛИ (если добавляем новый блок то дописываем через запятую его новый класс пример .spoiler3-button) */
.spoiler1-button,
.spoiler2-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
background-color: #f5f5f5;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: background-color 0.3s;
margin: 10px 0;
gap: 8px;
}
/* (если добавляем новый блок то дописываем через запятую его новый класс пример .spoiler3-button) */
.spoiler1-button:hover,
.spoiler2-button:hover {
background-color: #e0e0e0;
}
/* (если добавляем новый блок то дописываем через запятую его новый класс пример .spoiler3-button) */
.spoiler1-content,
.spoiler2-content {
padding: 16px;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 4px 4px;
display: none;
margin-top: -4px;
}
.arrow {
flex-shrink: 0;
transition: transform 0.3s;
}
</style>
/* Первый блок HTML сдесь класс и ИД боков с номером 1 */
<div class="spoiler-divider"></div>
<div class="spoiler-wrapper">
<button class="spoiler1-button" onclick="toggleSpoiler1()" id="spoiler1Button">
<span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
<svg class="arrow" width="17" height="17" viewBox="0 0 17 17">
<path fill="none" stroke="#000" stroke-width="1.7" d="M3.6 10.6L8.3 16l4.7-5.4M8.3 15.2V1.2"/>
</svg>
</button>
<div class="spoiler1-content" id="spoiler1Content">
<p>Контент первого спойлера</p>
</div>
</div>
<div class="spoiler-divider"></div>
/* Скрипт для первого блока, работает с классом и ИД с номером 1 */
<script>
function toggleSpoiler1() {
const button = document.getElementById('spoiler1Button');
const content = document.getElementById('spoiler1Content');
const arrow = button.querySelector('.arrow');
const isExpanded = content.style.display === 'block';
content.style.display = isExpanded ? 'none' : 'block';
arrow.style.transform = isExpanded ? 'rotate(0)' : 'rotate(180deg)';
button.querySelector('.spoiler-text').textContent = isExpanded
? 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ'
: 'СВЕРНУТЬ';
}
</script>
/* Второй блок HTML сдесь класс и ИД боков с номером 2 */
<div class="spoiler-divider"></div>
<div class="spoiler-wrapper">
<button class="spoiler2-button" onclick="toggleSpoiler2()" id="spoiler2Button">
<span class="spoiler-text">УЗНАТЬ ДОПОЛНЕНИЕ</span>
<svg class="arrow" width="17" height="17" viewBox="0 0 17 17">
<path fill="none" stroke="#000" stroke-width="1.7" d="M3.6 10.6L8.3 16l4.7-5.4M8.3 15.2V1.2"/>
</svg>
</button>
<div class="spoiler2-content" id="spoiler2Content">
<p>Контент второго спойлера</p>
</div>
</div>
<div class="spoiler-divider"></div>
/* Скрипт для второго блока, работает с классом и ИД с номером 2 */
<script>
function toggleSpoiler2() {
const button = document.getElementById('spoiler2Button');
const content = document.getElementById('spoiler2Content');
const arrow = button.querySelector('.arrow');
const isExpanded = content.style.display === 'block';
content.style.display = isExpanded ? 'none' : 'block';
arrow.style.transform = isExpanded ? 'rotate(0)' : 'rotate(180deg)';
button.querySelector('.spoiler-text').textContent = isExpanded
? 'УЗНАТЬ ДОПОЛНЕНИЕ'
: 'СВЕРНУТЬ';
}
</script>
/* Для третьего */
/* 1) Добавляем через запятую в стили класс .spoiler3-button */
/* 2) Копируем HTML код изменяем внуьри текст и номер в классе и ИД блока на 3 */
/* 2) Копируем JS код изменяем внуьри номер в классе и ИД блока на 3 */
|