Jak zobrazit a skrýt text po kliknutí na tlačítko „Více textu“?

autor: Led 19 2019 Scripty Všechny návody 0 komentářů

HTML kód (script)

Máte na webových stránkách příliš mnoho textu, a potřebujete text zobrazit / skrýt po kliknutí na text např. „Více info„? Čtěte dále …

 

V případě, že máte na webu velké množství textu a chtěli byste tento text elegantně skrýt a po kliknutí na tlačítko např. Více opět zobrazit, postup je následující:

Potřebný kód (script) je:

<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. Výše uvedený kód (script) je třeba upravit a vložit na Vaše webové stránky. Kód vložte na požadované místo na webu pomocí tlačítka „+“ a „HTML„.

 

2. V html kódu na řádku číslo 10 můžete změnit text na který se kliká. Můžete to přepsat na např. „Víc textu„.

3. V html kódu na řádku číslo 13 můžete upravit text, který se zobrazí po kliknutí na text z řádku číslo 10.

4. Změny publikujte. Výsledek uvidíte jen v publikované verzi webu.

  

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

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

TIP: Přidejte si web aktuální den a svátek pro CZ nebo SK. Více v návodu Script pro CZ / SK svátek

TIP: Přidejte si do pravého horního rohu ikony sociálních sítí FB a Instagram. Více v návodu Jak přidat ikony soc. sítí (FB a Instagram) do horní části na webu ve Webnode.

Další super návody

Webnode Recenze

Webnode Recenze

od Led 1 2025

Webnode recenze 2025Tvorba webu s Webnode je jednoduchá - zvládne to i Vaše babičkaVítejte v naší Webnode recenzi, kde Vám nabízíme objektivní pohled na editor, tzv. program pro vytváření webových stránek, od společnosti Webnode. Tvorba webu zdarma vs. prémiové...

Líbil se ti tento návod? Pošli ho přátelům 🙂

Vytvořit web zdarma
Viliam
Follow me
Latest posts by Viliam (see all)
0 0 hlasy
Article Rating
Odebírat
Upozornit na
guest


0 Comments
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
Zobrazit všechny komentáře