read more / less Funktion

tomasu · 01.09.2019

Moin Folks

Ich habe die "read more Funktion" mit folgendem Code implementiert, leider funktioniert dies nur fuer ein "Fenster". Ein weiterer Button macht leider auch den ersten Text sichtbar.
Ich denke es liegt an der Beschriftung "myBtn" bin mir aber nicht sicher. Konnte durch meine suche auch nicht feststellen, wie ich das problem loesen kann.

Bin dankbar für jeden Rat der weiterhilft.

merci
tom

Das ist mein HTML:
ERSTES FENSTER
<p>
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
<span id="dots">...</span><span id="more">
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit </span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

ZWEITES FENSTER
<p>
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
<span id="dots">...</span><span id="more">
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit </span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

das ist mein script:
<script type="text/javascript">
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");

if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>

Difool · 01.09.2019

Du kannst den Content in seperate Container setzen und dann via CSS-Klasse im JS ansteuern.
Alternativ könntest du die "read more"-Funktion auch nur mit CSS lösen:
https://css-tricks.com/forums/topic/jquery-read-more-less-toggle/#post-252967

tomasu · 01.09.2019

Vielen lieben Dank !!
werd mich da mal einlesen.

viel Grüße
tom

tomasu · 01.09.2019

Gibt es einen Artikel hier in diesem Forum der die Ansteuerung mit CSS im JS behandelt?
Hab die pure css version versucht, aber hat nicht so hingehauen wie erhofft.

LG
tom

giesbert · 01.09.2019

tomasu schrieb:
Gibt es einen Artikel hier in diesem Forum der die Ansteuerung mit CSS im JS behandelt?

Hm, wenn ich das richtig sehe, hast du das im Prinzip ja schon benutzt. Quick & Dirty:

Code:

var element = document.querySelector("#irgendEineID");
element.style.((CSS-Property)) = ((value))

Einfach die gewünschte CSS-Property angeben. Zu beachten: Properties mit Bindestrich werden in camelCase notiert (element.style.backgroundColor), die Klasse heißt className (element.style.className = "dieGewuenschteKlasse").

Möchtest du mehrere Elemente auf einen Schlag ändern, dann zB so:

Code:

var element = document.querySelectorAll("{CSS-Selektor}");
for (var i = 0; i = element.length-1; i++) {
  element[i].style.((CSS-Property)) = ((value))
}

tomasu · 01.09.2019

Vielen lieben Dank für deine Antwort.
hmmm...Leider hab ich davon nicht so viel verstanden.

hab ein bisschen rumversucht, aber leider erfolglos.

so ungefähr?

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. </span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
var element = document.querySelector("myBtn");
element.style.{CSS-Property} = {value}

if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>

giesbert · 01.09.2019

Rasch zwischendurch

Code:

var element = document.querySelector("myBtn");
element.style.{CSS-Property} = {value}

document.querySelector() greift das erste Element raus, auf das der angebebene Selector zutrifft. Mit

Code:

var element = document.querySelector("h1");

also zB das erste h1-Element. Du willst auf eine Element mit der ID myBtn zugreifen, dann gehört da, wie in CSS, ein Nummernkreuz davor:

Code:

var element = document.querySelector("#myBtn");

Du kannst natürlich weiterhin document.getElementById benutzen, aber das ist äh old school ;-).

Code:

element.style.{CSS-Property} = {value}

Die Mengenklammern waren der etwas ungeschickte Versuch von mir, einen Platzhalter zu markieren ;-), das sollte ein Kürzel für Formulierungen wie sein:

Code:

element.style.color = "white";
element.style.backgroundColor = "black";
element.style.float = "left";
element.style.border = "1px solid red";

/* und so weiter */

Mit

Code:

var element = document.querySelectorAll("p");

werden übrigens alle Elemente, auf die der angegebene CSS-Selector passt (hier ein einfaches p, es sind aber generell alle Selectoren möglich, werden genauso notiert wie in CSS) als Array in der angegebenen Variable gespeichert, mit element[0], element[1], element[3] ... kann man dann der Reihe nach auf alle selektierten Elemente zugreifen etc. Alle herausgefilterten Elemente kann man wie gezeigt zB über einer for- oder for ... of-Schleife ansprechen.

VALBITZ57 · 01.09.2019

Ich glaube das Problem ist nicht der Selektor, sondern eher die Funktionalität. Im originalen Beispiel funktioniert ja schon Show/Hide für das erste "Fenster" aber nicht für das zweite.

Ich nehme an mit dem ersten Button soll der erste Text, mit dem zweiten Button der zweite Text, usw. gesteuert werden. Dazu musst du einfach die "Fenster" mit einer ID unterscheiden. Das Beispiel sollte mit beliebig vielen Texten funktionieren:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test
        </title>
    </head>
    <body>
        <div id="fenster1">
            <p>
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
                <span class="dots">...</span>
                <span class="more" style="display: none;">
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
                </span>
            </p>
            <button class="myBtn" onclick="myFunction('fenster1')">Read more</button>
        </div>
        <div id="fenster2">
            <p>
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
                <span class="dots">...</span>
                <span class="more" style="display: none;">
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
                </span>
            </p>
            <button class="myBtn" onclick="myFunction('fenster2')">Read more</button>
        </div>
        <script type="text/javascript">
            function myFunction(fenster) {
                var selector = "#" + fenster + " ";
                var dots = document.querySelector(selector + ".dots");
                var moreText = document.querySelector(selector + ".more");
                var btnText = document.querySelector(selector + ".myBtn");

                if (dots.style.display === "none") {
                    dots.style.display = "inline";
                    btnText.innerHTML = "Read more";
                    moreText.style.display = "none";
                } else {
                    dots.style.display = "none";
                    btnText.innerHTML = "Read less";
                    moreText.style.display = "inline";
                }
            }
        </script>
    </body>
</html>

giesbert · 01.09.2019

Ich hab ja nur auf "Wie steuert man CSS via JS" geantwortet ;-). (Fremden Code analysiere ich ausgesprochen ungern - ich bin ein fauler Mensch)

tomasu · 01.09.2019

Vielen Lieben Dank euch beiden.
Es hat gefuntzt!!!

danke nochmal!
falls ihr mal in Tokio seid, lade ich euch gern auf n bier ein.
tom

read more / less Funktion

tomasu

Aktives Mitglied

Difool

MU Team

tomasu

Aktives Mitglied

tomasu

Aktives Mitglied

giesbert

Aktives Mitglied

tomasu

Aktives Mitglied

giesbert

Aktives Mitglied

VALBITZ57

Mitglied

giesbert

Aktives Mitglied

tomasu

Aktives Mitglied