Перейти к содержимому
SigitovAA
Главная
Новости
Учебные задания
О себе
Экскурсии
SigitovAA
Меню навигации
Меню навигации
Главная
Новости
Учебные задания
О себе
Экскурсии
<div class="accordion"> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(event)">Выберите радиус</div> <div class="accordion-content" onclick="drawCircle()"> <label><input type="radio" name="radius" value="50"> 50</label><br> <label><input type="radio" name="radius" value="100"> 100</label><br> <label><input type="radio" name="radius" value="150"> 150</label><br> <label><input type="radio" name="radius" value="200"> 200</label><br> <label><input type="radio" name="radius" value="250"> 250</label><br> </div> </div> <div class="accordion-item"> <div class="accordion-header" onclick="toggleAccordion(event)">Выберите цвет</div> <div class="accordion-content" onclick="drawCircle()"> <label><input type="radio" name="color" value="black"> Черный</label><br> <label><input type="radio" name="color" value="red"> Красный</label><br> <label><input type="radio" name="color" value="yellow"> Желтый</label><br> <label><input type="radio" name="color" value="blue"> Синий</label><br> <label><input type="radio" name="color" value="green"> Зеленый</label><br> </div> </div> </div> <div id="circle" style="margin-top: 20px;"></div>
function toggleAccordion(event) { const content = event.currentTarget.nextElementSibling; content.style.display = content.style.display === "block" ? "none" : "block"; } function drawCircle() { const radius = document.querySelector('input[name="radius"]:checked'); const color = document.querySelector('input[name="color"]:checked'); const circleDiv = document.getElementById('circle'); circleDiv.innerHTML = ''; if (radius && color) { const circle = document.createElement('div'); circle.style.width = `${radius.value * 2}px`; circle.style.height = `${radius.value * 2}px`; circle.style.borderRadius = '50%'; circle.style.backgroundColor = color.value; circle.style.display = 'inline-block'; circleDiv.appendChild(circle); } }
.accordion { border: 1px solid #ccc; width: 300px; } .accordion-item { border-bottom: 1px solid #ccc; } .accordion-header { padding: 10px; cursor: pointer; background-color: #f1f1f1; } .accordion-content { display: none; padding: 10px; }
Results:
Выберите радиус
50
100
150
200
250
Выберите цвет
Черный
Красный
Желтый
Синий
Зеленый