+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: toggl mit getElementById ohne jquery (/showthread.php?tid=1946)
toggl mit getElementById ohne jquery - madmaxy - 14.12.2022
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
RE: toggl mit getElementById ohne jquery - rzscout - 14.12.2022
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
RE: toggl mit getElementById ohne jquery - madmaxy - 14.12.2022
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
RE: toggl mit getElementById ohne jquery - rzscout - 15.12.2022
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
RE: toggl mit getElementById ohne jquery - madmaxy - 15.12.2022
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.
RE: toggl mit getElementById ohne jquery - rzscout - 15.12.2022
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
RE: toggl mit getElementById ohne jquery - madmaxy - 17.12.2022
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"?
RE: toggl mit getElementById ohne jquery - rzscout - 17.12.2022
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
RE: toggl mit getElementById ohne jquery - admin - 17.12.2022
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
RE: toggl mit getElementById ohne jquery - madmaxy - 21.12.2022
man Leute, Danke..euch beiden!!! Works like a charme!
