Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
toggl mit getElementById ohne jquery
#1
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
Zitieren
#2
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#3
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
Zitieren
#4
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#5
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.
Zitieren
#6
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#7
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"?
Zitieren
#8
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#9
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
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#10
man Leute, Danke..euch beiden!!! Works like a charme! Smile
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste