<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">Кликните, чтобы показать панель</p>
<div id="panel">
<p>Эта панель содержит элемент div, который по умолчанию скрыт (display: none).</p>
<p>Он оформлен в стиле CSS, и мы используем JavaScript, чтобы показать его (display: block).</p>
<p>Как это работает: обратите внимание, что элемент p из class="flip" имеет прикрепленный к нему атрибут onclick. Когда пользователь кликает элемент p, выполняется функция myFunction(), которая меняет стиль div с id="panel" с display: none (hidden) на display: block (visible).</p>
<p>Вы узнаете больше о JavaScript в учебнике по JavaScript на нашем сайте.</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>