Ako zobraziť a skryť text po kliknutí na tlačítko „Viac textu“ ?

od okt 25 2018 Scripty Všetky návody 0 komentárov

HTML kód (script)

Máte na webových stránkach príliš veľa textu, a potrebujete text zobraziť/skryť po kliknutí na text napr. „Viac info“ ? Čítajte ďalej…

 

V prípade, že máte na webe veľké množstvo textu a chceli by ste tento text elegantne skryť a po kliknutí na tlačítko napr. Viac opäť zobraziť, postup je nasledovný:

Potrebný HTML kód (script):

<script type="text/javascript">
function toggle(obj) {
var obj=document.getElementById(obj);
if (obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
</script>
<a href="javascript: void(0);" onClick="toggle('q1')">
CLICKABLE TEXT HERE
</a>
<div id="q1" style="display:none;">
TEXT WHAT U WILL SEE WHEN CLICKED HERE
</div>
view raw show-hide-text.js hosted with ❤ by GitHub

1. Vyššie uvedený HTML kód (script) je potrebné upraviť a vložiť na Vaše webové stránky. HTML kód vložte na požadované miesto na webe pomocou tlačítka „+“ a „HTML„.

2. V html kóde na riadku číslo 10 môžete zmeniť text na ktorý sa kliká. Môžete to prepísať na napr. „Viac textu„.

3. V html kóde na riadku číslo 13 môžete upraviť text, ktorý sa zobrazí po kliknutí na text z riadku číslo 10.

4. Zmeny publikujte. Výsledok uvidíte len v publikovanej verzii webu.

Ukážka tlačítka zobraziť viac textu:

Ukážka tlačítka: "Zobraziť viac" KLIKNITE SEM

Ďalšie skvelé návody

Ako vytvoriť Google Maps API kľúč?

Ako vytvoriť Google Maps API kľúč?

od mar 1 2025

V článku Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)? sme si ukázali, ako vytvoriť mapu cez Google My Maps a pridať na ňu vlastné body/špendlíky. Mapa vytvorená pomocou Google My Maps funguje samostatne a nevyžaduje Google Maps API kľúč. Ak chcete...

Webnode Recenzia

Webnode Recenzia

od jan 1 2025

Vitajte. Naša Webnode recenzia Vám ponúkne ucelený pohľad na editor, tzv. program na vytváranie webových stránok, od spoločnosti Webnode. Tvorba webu zdarma vs. prémiové služby. Výhody a nevýhody tohto online nástroja. Skúsenosti s Webnode. To všetko a ešte oveľa...

Pomohol ti tento návod? Pošli ho priateľom 🙂

Vytvoriť web zdarma
Viliam
Follow me
Najnovšie články od Viliam (zobraziť všetky)
0 0 votes
Article Rating
Subscribe
Notify of
guest


0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments