pytanie zadane 10 listopada 2018 w Programowanie przez użytkownika Gość

Jak zrobić w HTML (ewentualnie w CSS), aby po kliknięciu w konkretny napis/link wyświetliła się dodatkowa treść. Np. po kliknięciu w napis Zadzwoń wyświetlił się niżej nr telefonu?

1 odpowiedź

odpowiedź 10 listopada 2018 przez użytkownika

Link, który po kliknięciu rozwija dodatkowe dane na stronie, możesz wykonać tylko za pomocą czystego HTML + CSS, bez używania JavaScript czy Jquery, przez co nie obciążysz zbytnio kodu strony.

Na początek dodaj do głównego pliku CSS poniższe dwie linijki kodu:

#wyswietl { display: none; }
#wyswietl:target { display: block; }

Teraz w kodzie strony w sekcji <body> umieszczasz właściwy kod z linkiem i dodatkową informacją, która ma się wyświetlać po jego kliknięciu. Użyłem już tutaj Twojego przykładu z numerem telefonu.

<a href="#wyswietl" title="Wyświetl">Zadzwoń</a><br>
<div id="wyswietl">tel. 600 123 456</div>

Teraz dopiero po kliknięciu linku Zadzwoń na stronie, w linii poniżej wyświetli się numer telefonu. Oczywiście można informację można umieścić w dowolnym miejscu na stronie.

komentarz 14 grudnia 2020 przez użytkownika Gość
Ten atrybut title podobnie dziala gdy wstawimy go w obrazdk img
komentarz 25 października 2021 przez użytkownika Gość
Fajnie że tak w prosty sposób można to zrobić w html, bez zbędnych skryptów w js które tylko niepotrzebnie obciążają serwer i szybkość wczytywania strony
...