Blank page

Good design is obvious. Great design is transparent.

Curiosity about life in all its aspects, I think, is still the secret of great creative people.

Design creates culture. Culture shapes values. Values determine the future.

Everything should be made as simple as possible, but not simpler.

<!DOCTYPE html>
<html>
<head>
<style>
/* Стили для элементов */
.element {
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>

<div class="element1" onclick="showText(1)">Элемент 1</div>
<div id="text1" style="display:none">Текст для элемента 1</div>

<div class="element2" onclick="showText(2)">Элемент 2</div>
<div id="text2" style="display:none">Текст для элемента 2</div>

<div class="element3" onclick="showText(3)">Элемент 3</div>
<div id="text3" style="display:none">Текст для элемента 3</div>

<div class="element4" onclick="showText(4)">Элемент 4</div>
<div id="text4" style="display:none">Текст для элемента 4</div>

<script>
function showText(elementNumber) {
// Сначала скрываем все тексты
for (let i = 1; i <= 4; i++) {
let textId = "text" + i;
document.getElementById(textId).style.display = "none";
}
// Показываем текст, связанный с выбранным элементом
let selectedTextId = "text" + elementNumber;
document.getElementById(selectedTextId).style.display = "block";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
/* Стили для элементов */
.element {
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>

<div class="element" onclick="showText(1)">Элемент 1</div>
<div id="text1" style="display:none">Текст для элемента 1</div>

<div class="element" onclick="showText(2)">Элемент 2</div>
<div id="text2" style="display:none">Текст для элемента 2</div>

<div class="element" onclick="showText(3)">Элемент 3</div>
<div id="text3" style="display:none">Текст для элемента 3</div>

<div class="element" onclick="showText(4)">Элемент 4</div>
<div id="text4" style="display:none">Текст для элемента 4</div>

<script>
function showText(elementNumber) {
// Сначала скрываем все тексты
for (let i = 1; i <= 4; i++) {
let textId = "text" + i;
document.getElementById(textId).style.display = "none";
}
// Показываем текст, связанный с выбранным элементом
let selectedTextId = "text" + elementNumber;
document.getElementById(selectedTextId).style.display = "block";
}
</script>

</body>
</html>