Login

madmaxy · 14.12.2022, 22:34

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

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

CSS:

Code:
.hidden {

display: none;

}

und JavaScript:

Code:
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 · 14.12.2022, 23:48

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

Code:
<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

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.

Code:
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

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-Code:
<?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

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

Code:
<!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

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

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*** · (Dieser Beitrag wurde zuletzt bearbeitet: 17.12.2022, 19:43 von 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.

Code:
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

@madmaxy du brauchst eigentlich keine zusätzlichen Style Angaben

madmaxy · 21.12.2022, 00:19

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

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken