Immer nur ein Button offen

L

Loddar1

Erfahrenes Mitglied
Hallo liebe Gemeinde ich habe keine Ahnung von JavaScript und komme nicht weiter
Ich habe eine Pagination ähnlich wie hier über die 3 Punkte kommt man zu gehe zu Seite mit einem Klick öffnet sich ein Dialogfeld wenn ich 2 mal drei Punkte sehe und die linken 3 Punkte anklicke öffnet sich ein Dialogfeld, wenn ich jetzt auf die rechten 3 Punkte klicke schliesst sich das Linke Dialogfeld und das rechte Dialogfeld öffnet sich.

Hier bei euch geht das alles mit Ajax glaube ich
Ich habe einen eventHaendler

<button id="leftButton">...</button>
Javascript: 
document.getElementById('leftButton').addEventListener('click', function() {
var leftButton = this;
var leftList = document.getElementById('leftList');
var isExpandede = leftButton.getAttribute('expandede') === 'true';
leftButton.setAttribute('expandede', String(!isExpandede));
leftList.setAttribute('expandede', String(!isExpandede));
leftList.style.display = isExpandede ? 'none' : 'block';
});
Das gleiche nochmal für rightButton

Wie kann ich es erreichen das wenn ein Dialogfeld offen ist und der andere Button geklickt wird das sich das erste Dialogfeld schliesst?

Danke für eure eventuelle Hilfe
 
Ich habe eine Pagination ähnlich wie hier über die 3 Punkte kommt man zu gehe zu Seite mit einem Klick öffnet sich ein Dialogfeld wenn ich 2 mal drei Punkte sehe und die linken 3 Punkte anklicke öffnet sich ein Dialogfeld, wenn ich jetzt auf die rechten 3 Punkte klicke schliesst sich das Linke Dialogfeld und das rechte Dialogfeld öffnet sich.
Zum Vergrößern anklicken....
Das verstehe ich nicht. Mit "wie hier", meinst Du damit "hier im Forum"? Wenn Du auch das HTML dazu posten würdest, würde es das Verständnis sicher erleichtern.
 
PS: Nachdem ich das noch Mal genau gelesen habe, verstehe ich jetzt, was Du vor hast.
Statt mit einem benutzerdefinierten Attribut löst man das besser mit einer Klasse:
Code: 
<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>Expand Lists</title>

    <style>
        .the-list:not(.expanded) {
            display: none;
        }
    </style>

</head>

<body>
    <button id="leftButton" class="btn-for-list" data-id-list="leftList">Linke Liste</button>
    <button id="rightButton" class="btn-for-list" data-id-list="rightList">Rechte Liste</button>
    <div id="leftList" class="the-list">Hier die linke Liste</div>
    <div id="rightList" class="the-list">Hier die rechte Liste</div>
    <script>
        // Eventlistener für Klick auf das Dokument registrieren:
        document.addEventListener('click', event => {
            // Wurde ein Button für eine Liste geklickt?
            if (event.target.classList.contains('btn-for-list')) {
                const
                    // Expandierte Liste bereit stellen:
                    expandedList = document.querySelector('.the-list.expanded'),
                    // Dem Button zugeordnete Liste bereit stellen:
                    assignedList = document.getElementById(event.target.dataset.idList);
                // Ist eine Liste offen, schließen wir diese:
                if (expandedList) {
                    expandedList.classList.remove('expanded');
                }
                // Die Liste, die dem Button zugeordnet ist, öffnen:
                assignedList.classList.add('expanded');
            }
        });
    </script>
</body>

</html>
Das würde auch mit n Buttons und Listen funktionieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück