Ukrywanie i pokazywanie elementów

W tym zagadnieniu poznasz podstawowe techniki dynamicznego sterowania widocznością elementów na stronie internetowej. Ukrywanie i pokazywanie elementów jest często wykorzystywane podczas tworzenia interaktywnych funkcjonalności - np. rozwijanych menu, modalnych okien, komunikatów czy podpowiedzi.

Nauczysz się dwóch najważniejszych sposobów kontrolowania widoczności elementów:

• display: none/block - całkowite ukrywanie i usuwanie elementu z układu strony,

• visibility: hidden/visible - ukrywanie elementu z zachowaniem miejsca, które zajmował.

1. Ukrywanie i pokazywanie za pomocą display

Właściwość display służy do określania, w jaki sposób element ma być wyświetlany na stronie.
Najczęściej stosujemy dwie wartości:

• display: none - element zostaje całkowicie ukryty i nie zajmuje miejsca w układzie.

• display: block (lub inline, inline-block...) - element zostaje ponownie wyświetlony.

Przykład - ukrywanie i pokazywanie elementu

HTML:

<p id="tekst">To jest wiadomość!</p>
<button onclick="ukryj()">Ukryj</button>
<button onclick="pokaz()">Pokaż</button>

JavaScript:

function ukryj() {
    document.getElementById("tekst").style.display = "none";
}

function pokaz() {
    document.getElementById("tekst").style.display = "block";
}

Zastosowanie:
Tworzenie list rozwijanych, modalnych okien, dynamicznych paneli.

2. Ukrywanie i pokazywanie za pomocą visibility

Właściwość visibility również pozwala ukrywać elementy, ale w nieco inny sposób.

• visibility: hidden - element jest niewidoczny, ale dalej zajmuje miejsce na stronie.

• visibility: visible - element ponownie staje się widoczny.

Przykład - ukrywanie z zachowaniem miejsca

HTML:

<p id="komunikat">Ukryję się, ale miejsce zostanie!</p>
<button onclick="schowaj()">Schowaj</button>
<button onclick="pokaz()">Pokaż</button>

JavaScript:

function schowaj() {
    document.getElementById("komunikat").style.visibility = "hidden";
}

function pokaz() {
    document.getElementById("komunikat").style.visibility = "visible";
}

3. Różnice między display a visibility

• display: none usuwa element z układu - inne elementy zajmują jego miejsce.

• visibility: hidden ukrywa element wizualnie, ale miejsce pozostaje.

• display częściej stosujemy do interaktywnych sekcji, np. rozwijanych elementów.

• visibility stosujemy tam, gdzie układ nie może się przesuwać.

Podsumowanie ukrywania i pokazywania elementów:

Zmiana klas CSS w JavaScript

Podczas pracy z DOM bardzo często zachodzi potrzeba dynamicznej zmiany wyglądu elementów, np. podświetlenia przycisku, zaznaczenia aktywnej zakładki, pokazywania lub ukrywania komunikatu. Najwygodniejszym i najczęściej stosowanym sposobem jest manipulowanie klasami CSS za pomocą obiektu classList.

Dzięki metodom:

• classList.add()

• classList.remove()

• classList.toggle()

możesz w prosty sposób dodawać, usuwać lub przełączać klasy bez zmiany struktury HTML.

1. Dodawanie klasy - classList.add()

Metoda add() pozwala dodać jedną lub wiele klas do elementu.

Przykład

HTML:

<p id="tekst">Kliknij przycisk, aby dodać klasę.</p>
<button onclick="dodajKlase()">Dodaj klasę</button>

CSS:

.podswietl {
    background-color: yellow;
    padding: 5px;
}

JavaScript:

function dodajKlase() {
    document.getElementById("tekst").classList.add("podswietl");
}

Zastosowanie:
Zmiana stylów po kliknięciu, ustawianie aktywnych elementów menu itd.

2. Usuwanie klasy - classList.remove()

Metoda remove() usuwa wybraną klasę z elementu, jeśli ta klasa jest przypisana.

Przykład

HTML:

<p id="wiadomosc" class="podswietl">Ta wiadomość ma klasę podswietl.</p>
<button onclick="usun()">Usuń podświetlenie</button>

JavaScript:

function usun() {
    document.getElementById("wiadomosc").classList.remove("podswietl");
}

Zastosowanie:
Wyłączanie efektu, usuwanie wyróżnienia, przywracanie domyślnego wyglądu.

3. Przełączanie klasy - classList.toggle()

Metoda toggle() dodaje klasę, jeśli jej nie ma, a usuwa, jeśli jest obecna.
To idealne rozwiązanie do przełączników, rozwijanych paneli lub efektów "włącz/wyłącz".

Przykład - przełączanie widoczności

HTML:

<div id="panel" class="ukryty">To jest panel.</div>
<button onclick="togglePanel()">Pokaż / Ukryj panel</button>

CSS:

.ukryty {
    display: none;
}

JavaScript:

function togglePanel() {
    document.getElementById("panel").classList.toggle("ukryty");
}

Zastosowanie:
Menu hamburgerowe, zakładki, panele informacyjne, przełączanie trybów.

Podsumowanie zmiany klas CSS

Zadania - Ukrywanie i pokazywanie elementów

style.display 1 - Ukrywanie paragrafu po kliknięciu przycisku

Napisz skrypt, który po kliknięciu przycisku ukrywa paragraf.

<p id="tekst">To jest tekst do ukrycia.</p>
<button id="przycisk">Ukryj tekst</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onclick na przycisku.

• W funkcji ustaw style.display dla paragrafu.

Efekt:
Po kliknięciu przycisku paragraf znika.

style.display 2 - Pokazywanie ukrytego elementu po kliknięciu

Napisz skrypt, który po kliknięciu przycisku pokaże wcześniej ukryty element.

<p id="tekst" style="display:none;">Ukryty tekst</p>
<button id="przycisk">Pokaż tekst</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onclick na przycisku.

• W funkcji ustaw style.display dla paragrafu.

Efekt:
Po kliknięciu przycisku ukryty paragraf staje się widoczny.

style.display 3 - Przełączanie widoczności elementu (toggle)

Napisz skrypt, który przełącza widoczność elementu po każdym kliknięciu przycisku.

<p id="tekst">Tekst do przełączania</p>
<button id="przycisk">Pokaż/Ukryj</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onclick na przycisku.

• W funkcji sprawdź style.display:

  • jeśli "none" - ustaw "block",

  • jeśli "block" lub puste - ustaw "none".

Efekt:
Po każdym kliknięciu paragraf naprzemiennie znika i pojawia się.

visibility 4 - Ukrywanie elementu po najechaniu myszką

Napisz skrypt, który po najechaniu kursorem na element ukrywa go przy pomocy visibility.

<p id="tekst">Najedź tutaj myszką</p>

Polecenia:

• Pobierz paragraf.

• Ustaw onmouseover na paragrafie.

• W funkcji ustaw style.visibility.

Efekt:
Po najechaniu myszką element staje się niewidoczny, ale dalej zajmuje miejsce na stronie.

visibility 5 - Pokazywanie elementu po opuszczeniu myszki

Napisz skrypt, który po opuszczeniu kursora z elementu przywraca jego widoczność.

<p id="tekst" style="visibility:hidden;">Najedź myszką, aby zobaczyć tekst</p>

Polecenia:

• Pobierz paragraf.

• Ustaw onmouseout na paragrafie.

• W funkcji ustaw style.visibility.

Efekt:
Po opuszczeniu kursora element staje się widoczny.

visibility 6 - Przełączanie widoczności przy najechaniu i kliknięciu

Napisz skrypt, który po najechaniu kursorem zmienia widoczność elementu, a po kliknięciu przywraca.

<p id="tekst">Tekst zmienia widoczność</p>
<button id="przycisk">Przywróć widoczność</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Na paragrafie ustaw onmouseover, aby ustawić style.visibility.

• Na przycisku ustaw onclick, aby ustawić style.visibility.

Efekt:
Po najechaniu element znika, a po kliknięciu przycisku ponownie się pojawia.

Zadania - Zmiana klas CSS w JS

classList.add 1 - Dodawanie klasy po kliknięciu

Napisz skrypt, który po kliknięciu przycisku doda klasę CSS do elementu.

<p id="tekst">Tekst do podświetlenia</p>
<button id="przycisk">Dodaj klasę</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onclick na przycisku.

• W funkcji użyj element.classList.add("podswietl").

Efekt:
Po kliknięciu przycisku paragraf zyskuje klasę i zmienia styl (np. kolor tła, jeśli w CSS ustawiono .podswietl).

classList.add 2 - Dodawanie klasy po najechaniu myszką

Napisz skrypt, który po najechaniu kursorem na element doda klasę CSS.

<p id="tekst">Najedź myszką</p>

Polecenia:

• Pobierz paragraf.

• Ustaw onmouseover.

• W funkcji użyj element.classList.add("podswietl").

Efekt:
Po najechaniu kursorem paragraf zmienia styl dzięki dodanej klasie.

classList.remove 1 – Usuwanie klasy po kliknięciu

Napisz skrypt, który po kliknięciu przycisku usunie klasę CSS z elementu.

<p id="tekst" class="podswietl">Tekst podświetlony</p>
<button id="przycisk">Usuń klasę</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onclick na przycisku.

• W funkcji użyj element.classList.remove("podswietl").

Efekt:
Po kliknięciu przycisku paragraf traci styl przypisany do klasy.

classList.remove 2 - Usuwanie klasy po opuszczeniu myszki

Napisz skrypt, który po opuszczeniu elementu kursorem usuwa klasę CSS.

<p id="tekst" class="podswietl">Najedź i potem odejdź</p>

Polecenia:

• Pobierz paragraf.

• Ustaw onmouseout.

• W funkcji użyj element.classList.remove("podswietl").

Efekt:
Po przesunięciu kursora z elementu jego wygląd wraca do stanu początkowego.

classList.toggle 1 - Przełączanie klasy po kliknięciu

Napisz skrypt, który po kliknięciu przycisku naprzemiennie dodaje i usuwa klasę CSS.

<p id="tekst">Tekst do przełączania</p>
<button id="przycisk">Przełącz klasę</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onclick na przycisku.

• W funkcji użyj element.classList.toggle("podswietl").

Efekt:
Po każdym kliknięciu paragraf naprzemiennie zyskuje i traci klasę.

classList.toggle 2 - Przełączanie klasy po najechaniu i kliknięciu

Napisz skrypt, który po najechaniu kursorem dodaje klasę, a po kliknięciu przycisku usuwa ją.

<p id="tekst">Tekst zmieniający klasę</p>
<button id="przycisk">Usuń klasę</button>

Polecenia:

• Pobierz paragraf i przycisk.

• Ustaw onmouseover na paragrafie, aby element.classList.toggle("podswietl").

• Ustaw onclick na przycisku, aby też wywołać element.classList.toggle("podswietl").

Efekt:
Po najechaniu i kliknięciu styl elementu zmienia się naprzemiennie dzięki klasie CSS.