Autor Zpráva
Wayne
Profil *
Ahoj, mohl by mi někdo poradit jak udělat, aby když mám u nějakého článku uvedeno Zobrazit celý text pomocí, kterého se mi rozkryje celý obsah článku, aby poté to slovo zobrazit celý text zmizelo a text se umístil hned za skončeným textem článku? Zatím mám toto

var raf = window.requestAnimationFrame || 
    window.mozRequestAnimationFrame  ||
    window.webkitRequestAnimationFrame  ||
    setTimeout;
    
var nextElementSibling = function(el) {
    do {
        el = el.nextSibling;
    } while (el && el.nodeType !== 1);
    return el;
};

var show = function(content) {
    content.style.display = "block";
    content.style.height = "";
    var height = content.offsetHeight;
    content.style.height = 0;
    content.offsetHeight; // layout trigger
    
    raf(function() {
        content.style.height = height + "px";
    });
    content.setAttribute("data-open", "1");    
};

var hide = function(content) {
  content.style.height = 0;
  content.removeAttribute("data-open");
};

var toggle = function() {
    var content = nextElementSibling(this);    
    
    if (content.getAttribute("data-open")) {
        hide(content);
    }
    else {
        show(content);
    }
};

var headers = document.querySelectorAll(".toggle-header");
for (var i = 0; i < headers.length; i++) {
    headers[i].onclick = toggle;
}

To znamená, že po kliknutí na slovo "Zobrazit celý text" se mi rozkryje celý obsah, ale slovo zobrazit celý text mi tam zůstane. Byl bych vám moc vděčný za radu, která vyřeší můj problém
Keeehi
Profil
A struktura HTML ke kterému to patří vypadá jak?
Wayne
Profil *
<div class="toggle">
    <div class="toggle-header">
        <strong>Zobrazit celý text</strong>
    </div>
    <div class="toggle-content">
        <p>Zobrazení celého textu</p>
    </div>
</div>
Keeehi
Profil
Je vám ale jasné že když ten text zmizí že už na něj nepůjde znovu kliknout a tedy už to nepůjde zavřít. Tedy místo toggle by bylo lepší vymyslet jiné pojmenování, třeba showMore.

var toggle = function() {
    this.style.display = 'none';
    show(nextElementSibling(this));
};
Wayne
Profil *
to máte pravdu, že by bylo asi ideálnější na konec rozkrytého obsahu vložit Skrýt text
Keeehi
Profil
Pak bych to viděl na
<el obal>
    <el perex>
    <el content>
    <el readMore>
Přičemž na readMore by reagoval na click při kterém by provedl toggle na content + změnil vnitřek na "skrýt text".

Ale tedy osobně v tom skrývání nevidím moc užitku. Když už to jako uživatel budu mít přečtené, proč bych to měl skrývat když mužů rovnou pokračovat na další článek. Navíc když to skryjí, tak se mi nejspíše stránka odroluje někam kam to úplně nechci a budu to muset dohledávat.
Wayne
Profil *
Mohl byste mi ještě poradit s tím JS kódem na to skrytí? Zatím mi to nereaguje
Keeehi
Profil
Klasické skrývání bez animace takto.
Wayne
Profil *
Super, dík moc!!!

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: