Tworzenie Strony Internetowej z Rozwijanymi Sekcjami
Witajcie! Dziś pokażę Wam, jak stworzyć prostą stronę internetową z wieloma sekcjami, które można rozwijać i zwijać po kliknięciu przycisku „plus”. To świetny sposób na uporządkowanie dużej ilości treści i uczynienie strony bardziej przyjazną dla użytkownika. Bez zbędnych wstępów, przejdźmy do kodu!
Krok 1: Struktura HTML
Na początek stworzymy strukturę HTML naszej strony. Każda sekcja będzie zawierać nagłówek oraz ukrytą treść, która będzie wyświetlana po kliknięciu nagłówka.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rozwijane Sekcje</title>
<style>
.section {
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 10px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: #f1f1f1;
padding: 10px;
}
.section-content {
display: none;
padding: 10px;
}
.plus-icon {
font-size: 18px;
}
</style>
</head>
<body>
<div class="section">
<div class="section-header">
<span>Sekcja 1</span>
<span class="plus-icon">+</span>
</div>
<div class="section-content">
<p>Treść sekcji 1.</p>
</div>
</div>
<div class="section">
<div class="section-header">
<span>Sekcja 2</span>
<span class="plus-icon">+</span>
</div>
<div class="section-content">
<p>Treść sekcji 2.</p>
</div>
</div>
<div class="section">
<div class="section-header">
<span>Sekcja 3</span>
<span class="plus-icon">+</span>
</div>
<div class="section-content">
<p>Treść sekcji 3.</p>
</div>
</div>
<script>
document.querySelectorAll('.section-header').forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
if (content.style.display === "none" || content.style.display === "") {
content.style.display = "block";
header.querySelector('.plus-icon').textContent = "-";
} else {
content.style.display = "none";
header.querySelector('.plus-icon').textContent = "+";
}
});
});
</script>
</body>
</html>
Jeden button do rozwijania wszystkiego
<button id="toggle-all">Rozwiń/Wycofaj wszystko</button>
document.getElementById('toggle-all').addEventListener('click', () => {
const headers = document.querySelectorAll('.section-header');
let allExpanded = true;
headers.forEach(header => {
const content = header.nextElementSibling;
if (content.style.display === "none" || content.style.display === "") {
allExpanded = false;
}
});
headers.forEach(header => {
const content = header.nextElementSibling;
if (allExpanded) {
content.style.display = "none";
header.querySelector('.plus-icon').textContent = "+";
} else {
content.style.display = "block";
header.querySelector('.plus-icon').textContent = "-";
}
});
});Search
Categories
O Blogu
Cześć Podróżniku!
Ta strona ma nie być typowym poradnikiem w IT, Głównym jej cel to zapisanie krótkich notatek, które mogą się przydać w codziennym życiu podczas korzystania/konfiguracji różnych urządzeń np. Ustawienia DHCP na Routerze Cisco, Ustawieniu Karty sieciowej na Linuxie itp.
Dodaj komentarz