This forum uses cookies

madmaxy · 14.12.2022, 22:34 - Wörter:

Hallo,

gibt es die Möglichkeit ein simples toggl javascript ohne jquery zu erstellen.

ich würde gerne durch die inclick function Elemente anzeigen/ausblenden lassen. Wichtig: Diese Elemente hätte eine andere id

***rzscout*** · 14.12.2022, 23:22 - Wörter:

Hi madmaxy,
ja ich habe da eine passende Lösung. Und zwar kannst du Klassen toggleln mit JavaScript.

CSS:

.hidden {
display: none;
}

und J‌avaScript:

var meinElement = document.getElementById('meinElement');
var meinButton = document.getElementById('meinButton');
meinButton.addEventListener('click', ()=>{
    meinElement.classList.toggle('hidden');
});

Ich hoffe die Codeschnipsel helfen dir weiter.

Viele Grüße

rzscout

madmaxy

Danke für den Tipp rzscout,

vielleicht stelle ich es an der Live-Seite dar.

Z.B. auf xxx.xx hatte ich die <div> Elemente "MEHR INFOS" per folgende jquery eingefügt

 <div class="detail-toggle" onclick="toggle('<?php echo $this->item->id; ?>')">Mehr Infos</div>

und dieses onclick wollte ich nun ohne jquery darstellen.

wie würde ich in deinem Beispiel die dyn. ID verarbeiten?

Gruß,
mad

***rzscout*** · 15.12.2022, 01:20 - Wörter:

Hi madmaxy,
leider verstehe ich nicht was du möchtest. Was meinst du mit dyn. ID? Das oben geschriebene Beispiel ist jetzt nicht das Gelbe vom Ei.

function toggle(elem) {
    let myElem = document.getElementById(elem);
    myElem.classList.toggle('meineKlasse');
}

Versuche es mal damit, ich hoffe dir hilft dieser Codeschnipsel weiter um deine Fragen zu beantworten.

Viele Grüße

rzscout

madmaxy · 15.12.2022, 10:46 - Wörter:

Erstmals danke für deine Infos rzscout.

Verzeih, dass ich mein Anliegen nicht korrekt formuliert habe.

Ich hab auf einer Seite mehrere Elemente mit Zusatzinformationen. Diese befinden sich in einer <div>-Box die auf display:none gesetzt ist. Da ich nicht mit einer statischen ID arbeiten kann beim onclick, da sonst alle Elemente angezeigt würden, wird die ID per php Anweisung aufgerufen. Und zwar so:

<?php echo $this->item->id; ?>

Deine Lösung ist wie ich es verstehe "statisch". Ich frage mich, ob meine Anforderung per Vanilla js ohne jquerey erfüllt werden kann.

***rzscout*** · 15.12.2022, 19:08 - Wörter:

Hi,
ja es gibt da eine einfache Lösung - hier meine Codeschnipsel dazu:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Details anzeigen</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
    <script>
        var detailToggleList;
        document.addEventListener('DOMContentLoaded', function() {
            detailToggleList = document.querySelectorAll('.detail-toggle > p');
            detailToggleList.foreach(function(item, index) {
                item.addEventListener('click', function(item, index){
                    let myparent = item.parentElement;
                    myparent.querySelector('.detail-content').classList.toggle('hidden');
                });
            });
        });
    </script>
</head>
<body>
    <div class="detail-toggle" id="<?php $pageBuilder->item->id; ?>">
        <p>Mehr Infos</p>
        <div class="detail-content hidden">
            <?php echo $pageBuilder->item->content; ?>
        </div>
    </div>
    <div class="detail-toggle" id="<?php $pageBuilder->item->id; ?>">
        <p>Mehr Infos</p>
        <div class="detail-content hidden">
            <?php echo $pageBuilder->item->content; ?>
        </div>
    </div>
    <div class="detail-toggle" id="<?php $pageBuilder->item->id; ?>">
        <p>Mehr Infos</p>
        <div class="detail-content hidden">
            <?php echo $pageBuilder->item->content; ?>
        </div>
    </div>
    <div class="detail-toggle" id="<?php $pageBuilder->item->id; ?>">
        <p>Mehr Infos</p>
        <div class="detail-content hidden">
            <?php echo $pageBuilder->item->content; ?>
        </div>
    </div>
    <div class="detail-toggle" id="<?php $pageBuilder->item->id; ?>">
        <p>Mehr Infos</p>
        <div class="detail-content hidden">
            <?php echo $pageBuilder->item->content; ?>
        </div>
    </div>

</body>
</html>

Wenn ich es richtig verstanden habe soll die Funktion unabhängig der ID zur verfügung stehen. Deswegen habe ich allen Elementen einen EventListener gegeben wo die CSS-Klasse 'hidden' getogglelt wird.

Viele Grüße

rzscout

madmaxy · 17.12.2022, 07:14 - Wörter:

Nochmals Danke!

habe es eingebaut. In der "Console" sehe ich auch, dass alle Daten korrekt übermittelt werden.

Jedoch wird die .detail-content Klasse nie "active". Daher wird nichts ein geblendet Fehlt da nicht etwas wie "active class"?

***rzscout*** · 17.12.2022, 17:51 - Wörter:

Hi madmaxy,
leider verstehe ich deine Frage nicht ganz. Könntest du deine Frage ausführlicher stellen. Ich versuche dir dann eine passende Lösung zu schreiben.

Viele Grüße

rzscout

***admin***

Ich verstehe das schon , weil dein Code bei mir auch nicht läuft.
Ich habe 2 Sachen geändert, damit es geht .

Vielleicht kannst du mich verbessern wenn ich mit meinen Antworten falsch liege.

Habe das forech in forEach geändert
und das item, index gelöscht.

von
    item.addEventListener('click', function(item, index){
zu
   item.addEventListener('click', function(){

Beim ersten glaube ich das case-sensitive schuld ist .
Beim zweiten bin ich mir nicht ganz sicher , denke das die item sich irgendwie überschreiben.

So läuft es aber jetzt bei mir
https://codepen.io/basti1012/pen/gOjYdRj?editors=1000

Just a moment...
Enable JavaScript and cookies to continue

@madmaxy du brauchst eigentlich keine zusätzlichen Style Angaben

madmaxy · 21.12.2022, 00:19 - Wörter:

man Leute, Danke..euch beiden!!! Works like a charme! Smile

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken