Stop Akkordeon erweitert auf Seite laden

Question

Ich bin nutzlos mit JS, wie ich keine Ahnung habe, was ich tun, aber ich habe eine Wand, dass CSS nicht mich vorbei kommen.

Ich habe eine Seite auf einer Website, wo es Akkordeon Textabschnitte gibt. Das Problem, das ich habe, ist, dass ich es so machen will, dass keine davon beim Seitenladen erweitert wird, ich möchte, dass sie alle versteckt sind. Derzeit wird die Seite mit der erweiterten Option geöffnet.

Unten ist, was ich glaube, das verantwortliche Skript zu sein, kann jemand Licht für mich werfen?

Vielen Dank im Voraus.

/** 
* Accordion-folding functionality. 
* 
* Markup with the appropriate classes will be automatically hidden, 
* with one section opening at a time when its title is clicked. 
* Use the following markup structure for accordion behavior: 
* 
* <div class="accordion-container"> 
* <div class="accordion-section open"> 
*  <h3 class="accordion-section-title"></h3> 
*  <div class="accordion-section-content"> 
*  </div> 
* </div> 
* <div class="accordion-section"> 
*  <h3 class="accordion-section-title"></h3> 
*  <div class="accordion-section-content"> 
*  </div> 
* </div> 
* <div class="accordion-section"> 
*  <h3 class="accordion-section-title"></h3> 
*  <div class="accordion-section-content"> 
*  </div> 
* </div> 
* </div> 
* 
* Note that any appropriate tags may be used, as long as the above classes are present. 
* 
* @since 3.6.0. 
*/ 

(function($){ 

$(document).ready(function() { 

    // Expand/Collapse accordion sections on click. 
    $('.accordion-container').on('click keydown', '.accordion-section-title', function(e) { 
     if (e.type === 'keydown' && 13 !== e.which) { // "return" key 
      return; 
     } 

     e.preventDefault(); // Keep this AFTER the key filter above 

     accordionSwitch($(this)); 
    }); 

}); 

/** 
* Close the current accordion section and open a new one. 
* 
* @param {Object} el Title element of the accordion section to toggle. 
* @since 3.6.0 
*/ 
function accordionSwitch (el) { 


    var section = el.closest('.accordion-section'), 
     sectionToggleControl = section.find('[aria-expanded]').first(), 
     container = section.closest('.accordion-container'), 
     siblings = container.find('.open'), 
     siblingsToggleControl = siblings.find('[aria-expanded]').first(), 
     content = section.find('.accordion-section-content'); 

    // This section has no content and cannot be expanded. 
    if (section.hasClass('cannot-expand')) { 
     return; 
    } 





    // Add a class to the container to let us know something is happening inside. 
    // This helps in cases such as hiding a scrollbar while animations are executing. 
    container.addClass('opening'); 

    if (section.hasClass('open')) { 
     section.toggleClass('open'); 
     content.toggle(true).slideToggle(150); 
    } else { 
     siblingsToggleControl.attr('aria-expanded', 'false'); 
     siblings.removeClass('open'); 
     siblings.find('.accordion-section-content').show().slideUp(150); 
     content.toggle(false).slideToggle(150); 
     section.toggleClass('open'); 
    } 

    // We have to wait for the animations to finish 
    setTimeout(function(){ 
     container.removeClass('opening'); 
    }, 150); 

    // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value. 
    if (sectionToggleControl) { 
     sectionToggleControl.attr('aria-expanded', String(sectionToggleControl.attr('aria-expanded') === 'false')); 
    } 
} 

}) (jQuery);

Answer 1

Wenn Sie genau die gleiche HTML, wie in dem Anfang der Datei haben, entfernen Sie die open Klasse von dem ersten Akkordeon:

<div class="accordion-container"> 
    <!-- The next accordion-section also had the open class --> 
    <div class="accordion-section"> 
     <h3 class="accordion-section-title"></h3> 
     <div class="accordion-section-content"> 
     </div> 
    </div> 
    <div class="accordion-section"> 
     <h3 class="accordion-section-title"></h3> 
     <div class="accordion-section-content"> 
     </div> 
    </div> 
    <div class="accordion-section"> 
     <h3 class="accordion-section-title"></h3> 
     <div class="accordion-section-content"> 
     </div> 
    </div> 
</div>