Akkordeon

[Eisbär]

Hallo zusammen
eine Frage zum Akkordeon Menü :
Ist es eigentlich machbar dieses Menü automatisch alphabetisch zu sortieren, damit man bei neuen Menüpunkten diese Sortierung nicht immer wieder manuell vornehmen muß?

[Tommy Herrmann]

Moin,

nein - das geht leider nicht. Das ist ja ganz gewöhnlicher HTML-Code und nicht z.-B. eine sortierbare Tabelle

[Eisbär]

Hallo Tommy,
besten Dank für die Antwort - das wärs gewesen, jetzt noch eine Sortierung. Schade.
Viele Grüße
Eisbär

[Andyneu]

Hallo,
wenn ich dich richtig verstanden habe willst du das Die Einzelnen Tabs nach Alphabet sortiert werden und die Texte innerhalb der Tabs sollen auch alphabetisch sortiert werden.
Das geht sehr wohl und zwar mit JavaScript. Dies wird ausgeführt, beim laden der Seite.

Hast du alle Themen zur Verfügung von Mobirise?
Wenn ja würde ich dir einen fertigen Entwurf der funktioniert zukommen lassen.
Man kann das hier nicht wirklich zeigen, da die Magie beim Laden wirkt

Hier in Mobirise:

Hier dann publiziert und im Browser:

Hier der Code:

Code: Alles auswählen

<script>
// Führe die Funktionen aus, wenn das DOM geladen ist
        document.addEventListener('DOMContentLoaded', function () {
            sortCardsAlphabetically();
            sortTextContentAlphabetically();
        });



// Funktion zum Alphabetisch Sortieren der Karten nach der "h4"-Überschrift
        function sortCardsAlphabetically() {
        
 // hier muss eventuell die class angepaßt werden       
            const cardsContainer = document.querySelector('.accordion-content'); 
            if (!cardsContainer) return;

            const cards = Array.from(cardsContainer.querySelectorAll('.card'));

            const sortedCards = cards.sort((a, b) => {
 // hier muss eventuell das h4 Tag geändert werden           
                const headingA = a.querySelector('h4').textContent;
                const headingB = b.querySelector('h4').textContent;
                return headingA.localeCompare(headingB);
            });

            // Füge die sortierten Karten zurück in das Akkordeon ein
            sortedCards.forEach(card => {
                cardsContainer.appendChild(card);
            });
        }

        // Funktion zum Sortieren des Textinhalts in der "text"-Klasse
        function sortTextContentAlphabetically() {
            const textContainers = document.querySelectorAll('.panel-body');

            textContainers.forEach(container => {
                const elements = container.children;

                const sortedElements = Array.from(elements).sort((a, b) => {
                    return a.textContent.localeCompare(b.textContent);
                });

                container.innerHTML = ''; // Leert den Container

                sortedElements.forEach(element => {
                    container.appendChild(element);
                });
            });
        }
  </script>      
        

[Tommy Herrmann]

Moin Andy,

warst ja lange nicht hier

Hast Du inzwischen einen Kurs in JavaScript gemacht Ich habe bis heute kein JavaScript gelernt

Mit meiner Aussage meinte ich auch eher, dass das mit den Mitteln von Mobirise nicht geht.

Hast Du das mal getestet und wenn mit welcher Mobirise-Version? Erstelle doch mal eine Testseite, das wäre ja eine Sache, die bestimmt irgendwie mit JS mit den richtigen Klassen geht und die auch vielen nutzen könnte.

In "Mobirise5" (wir sind jetzt be v5.9.0), was ja kein jQuery mehr verwendet und auch ganz andere Klassen, geht das nämlich so noch nicht.

[Andyneu]

Hallo Tommy
Ja das stimmt ich war lange nicht hier. Liegt daran, dass ich kaum Zeit habe. Aber hin und wieder passt es dann doch.
Erstellt habe ich es mit der Version 5.8.x ( schreibe gerade vom Handy daher kann ich gerade nicht die genau Version gucken. Ist die vor der jetzt gerade aktuellen 5.9.0)
Ich habe eine Seite damit erstellt kann ich dir gerne zukommen lassen. Der Code muss allerdings auf das gerade verwendete Accordion angepasst werden wenn man nicht das selbe wie ich genutzt habe nutzen möchte. Ich habe den Code ja mit dazu geschrieben im Post. Da fehlt nur noch der Aufruf der beiden Funktionen beim Laden der Seite.
Wäre dann aber in der Vorlage mit drin.

[Tommy Herrmann]

Moin,

nee - das sollte mit v5.8.x auch nicht anders sein.

Es ist nur schön, wenn der Code der gepostet wird auch von Anfängern genutzt werden kann. Mobirise verwendet ja für sein Akkordeon eigentlich immer den gleichen Quellcode.

Wenn man selbst kein JavaScript kann, hilft einem das so nämlich sonst überhaupt nicht weiter.

Ich selbst benötige das nicht - es wäre eben nur schön, wenn dann so ein Code auch von jedem anwendbar ist und eben nichts, wie z.B. der Aufruf, fehlt.

Dieses Script sollte ja eigentlich auch gleich mit dem Aufruf der Seite wirken, also das Akkordeon sofort sortiert anzeigen.

Wenn Du aber keine Zeit hast, dann kannst Du das ja irgendwann vielleicht mal nachholen.

[Andyneu]

Ja den Code ergänze ich noch sind 4 Zeilen.
Der Code ist generell für alle Accordions passend du musst aber dafür sorgen daß die richtigen Inhalte sortiert werden. In meinem Beispiel eben bei den Cards die h4 Überschriften und in den Tabs die p-tags.

Wenn es jetzt anderen Inhalt gibt muss man dahin gehend eben das Script anpassen.
Das sollte aber mit einem Tutorial dann machbar sein.

Code zum Aufrufen der Funktionen ergänzt!!!

[Eisbär]

Erst mal besten Dank dass Du Dich mit meinem Problem beschäftigt hast!

Im Grunde genommen sind es die jeweiligen Überschriften in meinem "Akkordeon Lexikon", die alphabetisch sortiert werden sollen. Die Inhalte der jeweiligen Felder sollen dann natürlich mit übernommen werden.
Eine Frage habe ich noch, da ich überhaupt keine Ahnung von javascript habe: An welcher Stelle in dem Block setzte ich den code dann ein? (ich habe Mobirise 5.90)
Besten Dank.

[Andyneu]

Hallo Eisbär,
kannst du mal einen Link zu deiner Seite mit dem Accordion hier hinterlassen?
Dann kann man besser sehen, ob das was ich da gemacht habe auch für dich paßt.

Der Code muss im Quelltext direkt vor dem schließenden </body>-tag stehen.
Das erreichst du in Mobirise, indem du auf der Seite, wo dein Accordion eingebaut ist, die Seiteneinstellungen aufrufst und dort im Feld "End of <body> code" das script einfügst.

Leider gibt es einige leichte Varianten wie mobirise die verschiedenen accordions generiert.
Kann also sein das da noch etwas angepaßt werden muss

[Tommy Herrmann]

Moin Andy,


ich finde es großartig, dass Du Dich hier wieder einsetzt und versuchst zu helfen.

... aber sorry - so kann das jemand, der keine Ahnung von JavaScript hat, überhaupt noch nicht verstehen. Da nutzt ja auch nicht, wenn Du schreibst, dass das angepasst werden muss - das ist schon klar - nur wie

Zunächst muss man auch die <script> Tags </script> mal mit angeben - auch das weiß jemand, der damit noch nicht gearbeitet hat, nicht.



Hast Du nicht mal ein Beispiel als Seite (online) und den Quellcode vom Akkordeon, der zu Deinem Script passt?



Hier ist zum Beispiel der Quellcode vom Standard-Akkordeon des Standard-Themas "Mobirise5":

Code: Alles auswählen

                <div id="bootstrap-accordion" class="panel-group accordionStyles accordion" role="tablist" aria-multiselectable="true">
                    <div class="card mb-3">
                        <div class="card-header" role="tab" id="headingOne">
                            <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-core="" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
                                <h6 class="panel-title-edit mbr-fonts-style mb-0" mbr-theme-style="display-7" data-app-selector=".panel-title-edit"><b>How to create more items in this list?</b>
                                </h6>
                                <span class="sign mbr-iconfont mbri-arrow-down"></span>
                            </a>
                        </div>
                        <div id="collapse1" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#accordion">
                            <div class="panel-body">
                                <p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">The number of items is limited in this block. Open
                                    the Block parameters to change the amount of items.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3" mbr-if="cardAmount > 1">
                        <div class="card-header" role="tab" id="headingOne">
                            <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-core="" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                <h6 class="panel-title-edit mbr-fonts-style mb-0" mbr-theme-style="display-7" data-app-selector=".panel-title-edit"><b>What is Mobirise Kit?
                                    </b></h6>
                                <span class="sign mbr-iconfont mbri-arrow-down"></span>
                            </a>
                        </div>
                        <div id="collapse2" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#accordion">
                            <div class="panel-body">
                                <p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                    Mobirise Kit is a service that provides the access to all current and new
                                    themes/extensions developed by Mobirise. New themes/extensions are released every
                                    month and will be available in your account during your plan period, without any
                                    additional charge.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3" mbr-if="cardAmount > 2">
                        <div class="card-header" role="tab" id="headingOne">
                            <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-core="" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                <h6 class="panel-title-edit mbr-fonts-style mb-0" mbr-theme-style="display-7" data-app-selector=".panel-title-edit"><b>Can I create sites for commerical
                                        projects?</b></h6>
                                <span class="sign mbr-iconfont mbri-arrow-down"></span>
                            </a>
                        </div>
                        <div id="collapse3" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#accordion">
                            <div class="panel-body">
                                <p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                    Yes, Mobirise is free for both non-profit and commercial sites.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3" mbr-if="cardAmount > 3">
                        <div class="card-header" role="tab" id="headingOne">
                            <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-core="" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                <h6 class="panel-title-edit mbr-fonts-style mb-0" mbr-theme-style="display-7" data-app-selector=".panel-title-edit"><b>What is Code Editor?</b></h6>
                                <span class="sign mbr-iconfont mbri-arrow-down"></span>
                            </a>
                        </div>
                        <div id="collapse4" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#accordion">
                            <div class="panel-body">
                                <p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                    This extension allows editing the code of block in the app. Also, it's possible to
                                    add code to the head and body parts of pages.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3" mbr-if="cardAmount > 4">
                        <div class="card-header" role="tab" id="headingOne">
                            <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-core="" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
                                <h6 class="panel-title-edit mbr-fonts-style mb-0" mbr-theme-style="display-7" data-app-selector=".panel-title-edit"><b>What is Mobirise Kit?
                                    </b></h6>
                                <span class="sign mbr-iconfont mbri-arrow-down"></span>
                            </a>
                        </div>
                        <div id="collapse5" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#accordion">
                            <div class="panel-body">
                                <p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                    Mobirise Kit is a service that provides the access to all current and new
                                    themes/extensions developed by Mobirise. New themes/extensions are released every
                                    month and will be available in your account during your plan period, without any
                                    additional charge.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3" mbr-if="cardAmount > 5">
                        <div class="card-header" role="tab" id="headingOne">
                            <a role="button" class="panel-title collapsed" data-toggle="collapse" data-bs-toggle="collapse" data-core="" href="#collapse6" aria-expanded="false" aria-controls="collapse6">
                                <h6 class="panel-title-edit mbr-fonts-style mb-0" mbr-theme-style="display-7" data-app-selector=".panel-title-edit"><b>Can I create sites for commerical
                                        projects?</b></h6>
                                <span class="sign mbr-iconfont mbri-arrow-down"></span>
                            </a>
                        </div>
                        <div id="collapse6" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion" data-bs-parent="#accordion">
                            <div class="panel-body">
                                <p class="mbr-fonts-style panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                    Yes, Mobirise is free for both non-profit and commercial sites.</p>
                            </div>
                        </div>
                    </div>
                </div>

... hier das verwendete Akkordeon aus der Rubrik "List":

Da auch ich kaum Ahnung von JavaScript habe, kann ich so schnell und ohne jede Erklärung Deinen Code auch nicht verstehen und ein Einbau scheitert natürlich dann auch - auch, wenn ich das an den Code oben mit einem <h6> Tag anpasse. Vielleicht schafft es "Eisbär" ja.

Da ich Deinen Code nur bedingt verstehe, kann ich leider damit auch nicht wirklich helfen.

Vielleicht wäre es dann auch zunächst besser eben nur die Tab-Überschriften alphabetisch zu sortieren, denn der Inhalt der einzelnen Akkordeon Tabs benötigt ja überhaupt keine Sortierung. Das würde das Script wahrscheinlich erst einmal sehr viel einfacher und verständlicher machen.

Da Du hier ja mit der Methode querySelector() arbeitest, kann man nach einem Verständnis das dann vielleicht sogar alleine auf ein anderes Element anwenden.

[Andyneu]

Hallo Tommy,
also ich habe ja gleich gesagt das Mobirise die Accordions leider nicht alle gleich generiert. Das hängt vom Theme ab und in welcher Konstellation es eingebunden ist.
So ja ich werde mal eins Online stellen Link werde ich hier dann nachtragen.
Das mit den Script tags habe ich tatsächlich vergessen, da ich diese scripte in der Regel in eigene Datein schreibe und sie dann im HTML Dokument einfach darauf referenziere.

Also in deinem Fall mit deinem Bsp. musst du die Class in accordion ändern

Code: Alles auswählen

 const cardsContainer = document.querySelector('.accordion');

und dann sind bei deinem Bsp. H6Tags also anpassen:

Code: Alles auswählen

const headingA = a.querySelector('h6').textContent;
          const headingB = b.querySelector('h6').textContent;

nur die Tab-Überschriften alphabetisch sortieren

Das ist auch kein Problem. Einfach den Aufruf der Funktion ganz oben mit dem Namen :

Code: Alles auswählen

sortTextContentAlphabetically();

auskommentieren.

Code: Alles auswählen

// Führe die Funktionen aus, wenn das DOM geladen ist
        document.addEventListener('DOMContentLoaded', function () {
            sortCardsAlphabetically();
           // sortTextContentAlphabetically();
        });

Hier der live Link mit genau Deinem Bsp. https://www.awm-websoft.de/entwicklung/accordion/
Zugangsdaten:
User: KdUser
PW: start123

[Tommy Herrmann]

Große Klasse Andy

... das funktioniert

[Andyneu]

Sage ich doch
Kannst sogar du

Teste bitte mal meinen live Link aus dem vorherigen Post.

[Tommy Herrmann]

Bin gerade nicht zu Hause und nur am Handy.

Gib mal noch die Zugangsdaten für die .htaccess.

Kann dann wahrscheinlich erst später oder morgen gucken.

[Tommy Herrmann]

Sehr gut - hast Du toll hin bekommen

Nun kann das sicher auch, anhand des vorgegebenen Akkordeons, von "Eisbär" nachgestellt werden - wenn nicht - dann fragen ...

[Eisbär]

Guten Morgen,

ich habe mal mit meinem (Un)wissen rumprobiert. - Leider komme ich nicht weiter.
Ich nutze das gleiche Accordion, dass Tommy oben im Bild einkopiert hat.

Leider komme ich nicht klar, und weiss jetzt nicht,

- ob ich an den Mobirise Vorgaben noch etwas ändern und
- an welcher Stelle ich o.in dem o.g. Block welchen javascript code eingeben muss

Könnt ihr das evtl. noch mal einem Anfänger erklären?
Besten Dank
Eisbär

[Tommy Herrmann]

Moin,

hier nochmals das von mir verwendete Akkordeon aus dem Standard-Thema "Mobirise5" unter der Rubrik "List":

hier ist der Code vom Andy, so wie ich diesen für das Akkordeon vom Standard-Thema "Mobirise5" eingesetzt habe.

Code: Alles auswählen

  <script>
        // 2023-07-29 Script erstellt im Forum von Andyneu
        // Führt die Funktionen aus, wenn das DOM (Seite) geladen ist
        document.addEventListener('DOMContentLoaded', function () {
            sortCardsAlphabetically();
            sortTextContentAlphabetically();
        });


        // Funktion zum Sortieren der Karten nach dem "h6"-Tag
        function sortCardsAlphabetically() {
        
            // hier muss eventuell die Class "accordion" angepasst werden       
            const cardsContainer = document.querySelector('.accordion'); 
            if (!cardsContainer) return;

            const cards = Array.from(cardsContainer.querySelectorAll('.card'));

            const sortedCards = cards.sort((a, b) => {
                // hier muss eventuell das h6 Tag geändert werden           
                const headingA = a.querySelector('h6').textContent;
                const headingB = b.querySelector('h6').textContent;
                return headingA.localeCompare(headingB);
            });

            // Füge die sortierten Karten zurück in das Akkordeon ein
            sortedCards.forEach(card => {
                cardsContainer.appendChild(card);
            });
        }

        // Funktion zum Sortieren des Textinhalts in der "text"-Klasse
        function sortTextContentAlphabetically() {
            const textContainers = document.querySelectorAll('.panel-body');

            textContainers.forEach(container => {
                const elements = container.children;

                const sortedElements = Array.from(elements).sort((a, b) => {
                    return a.textContent.localeCompare(b.textContent);
                });

                container.innerHTML = ''; // Leert den Container

                sortedElements.forEach(element => {
                    container.appendChild(element);
                });
            });
        }
  </script>

Kopiere diesen Code hier und füge ihn in den Seiteneinstellungen am Zahnrad der Seite ein, auf der Du diesen Akkordeon-Block verwendest, und zwar im Bereich "End of <body> code":

Sehen tut man die Sortierung dann erst nach dem Publizieren - lokal oder entfernt, also noch nicht auf der Arbeitsseite, da ja das JavaScript erst über den Browser verarbeitet wird.

Am Akkordeon selbst musst Du gar nichts ändern, das bleibt wie es ist.

[Eisbär]

... das Leben kann ja so einfach sein... - hat geklappt

Danke an Andy für den super code und
Danke an Tommy für die schnelle Hilfe heute früh

Viele Grüße
Eisbär

[Tommy Herrmann]

Moin,

ich habe das doch sehr gut zu gebrauchende Skript hier mal in einem Tutorial nochmals beschrieben:

https://www.mobirise-tutorials.com/Tuto ... tiert.html