logo
05.03.2019 16:28
1
Dobrý den,

jsem v tomto úplný noob, ale potřebuji v Shoptetu v HTML vytvořit jeden příkaz. Chci mít v kategorii obsáhlý text, ale nechci, aby šel vidět celý. Chci, aby šla vidět pouze část a pod ní bylo tlačítko "Zobrazit více", na které když se klikne, tak se zobrazí více textu a následně na konci tlačítko "Zobrazit méně", kde se to opět vrátí zpět. Jak to tam prosím udělat?

Jednoduchá struktura:

Text 1 (vždy viditelný)

Tlačítko "Zobrazit více"

Text 2 (text viditelný po kliknutí na tlačítko "zobrazit více")

Děkuji za reakce.

PH

Co se právě děje na Webtrhu?

05.03.2019 17:18
2
to je potřeba javascript. Nikoli pouhé HTML.
05.03.2019 17:21
3
Původně odeslal Adam Gajdečka
to je potřeba javascript. Nikoli pouhé HTML.
Na jednom webu na shoptetu jsem to viděl, podívejte https://www.gavri.cz/znacka/clean-air-optima/
05.03.2019 17:22
4
Ano, používají JS.

Tedy:

Kód:
<div class="toggle_holder"><input class="toggler" style="margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit více" /> <input class="toggler" style="display: none; margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit méně" />

<div class="toggle_holder"><input class="toggler" style="margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit více" /> <input class="toggler" style="display: none; margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit méně" />

    <script>
$(document).ready(function(){    
    $('.toggler').click(function(){
      $(this).parent().children().toggle();
      $(this).parent().parent().find('.toggled_content').slideToggle('slow'); 

  });    
});
</script>
05.03.2019 17:24
5
Původně odeslal Adam Gajdečka
Ano, používají JS.

Tedy:

<div class="toggle_holder"><input class="toggler" style="margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit více" /> <input class="toggler" style="display: none; margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit méně" />

<div class="toggle_holder"><input class="toggler" style="margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit více" /> <input class="toggler" style="display: none; margin-top: 15px; margin-bottom: 25px;" type="button" value="Zobrazit méně" />

<script>
$(document).ready(function(){
$('.toggler').click(function(){
$(this).parent().children().toggle();
$(this).parent().parent().find('.toggled_content') .slideToggle('slow');

});
});
</script>
Aha a jak to tam můžu vložit já jako člověk, který tomu nerozumí? :) nebo je zapotřebí, aby to udělal někdo za mě?
05.03.2019 17:25
6
Původně odeslal BestT
Aha a jak to tam můžu vložit já jako člověk, který tomu nerozumí? :) nebo je zapotřebí, aby to udělal někdo za mě?
bohužel se Shoptet nemám zkušenosti. Ovšem je potřeba ten JS kód dole vložit do patičky webu. A ty kódy nahoře potom na ty místa, kde se to má takto zobrazovat.
05.03.2019 17:29
7
Původně odeslal Adam Gajdečka
bohužel se Shoptet nemám zkušenosti. Ovšem je potřeba ten JS kód dole vložit do patičky webu. A ty kódy nahoře potom na ty místa, kde se to má takto zobrazovat.
YES! Díky moc! :)
05.03.2019 17:30
8
Rád pomáhám, když můžu :-)