This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

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:

.hidden {
display: none;
}

und JavaScript:

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 likes this post
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren 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
 <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
Als Lösung markieren 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.

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
Als Lösung markieren 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 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.
Als Lösung markieren Zitieren
#6
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren 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"?
Als Lösung markieren 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
Als Lösung markieren 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.
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 likes this post
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren
#10
man Leute, Danke..euch beiden!!! Works like a charme! Smile
Als Lösung markieren Zitieren


Gehe zu:


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