Mobirise Tutorials

Akkordeon alphabetisch sortiert

Vielen Dank für dieses JavaScript an unser Forum Mitglied Andy. Er hat dieses Skript hier vorgestellt.

Es ist also egal wie das Akkordeon ursprünglich angelegt wurde, durch dieses Skript werden die Überschriften der einzelnen Panele automatisch alphabetisch sortiert. Die Texte innerhalb der Panele werden insofern auch sortiert, wenn man einzelne Absätze in ein <p> tag </p> legt. Unten ein Screenshot von der noch nicht sortierten Arbeitsansicht von diesem Akkordeon.

Ich habe hier das Akkordeon vom Standard-Thema "Mobirise5" verwendet wie im Screenshot unten gezeigt. Bei einen Nachbau hätte ein anderes Akkordeon eventuell andere CSS-Klassen und <h> tags, daher müsste bei einem anderen Akkordeon das JavaScript gegebenenfalls angepasst werden.

<script>
  // 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>