Schließen Sie zuvor geöffnetes Akkordeon mit reinem JavaScript

Question 1

Auf einer Shopify-Produktseite mit drei Akkordeons versuche ich, etwas JavaScript-Code hinzuzufügen, um sicherzustellen, dass beim Laden der Seite standardmäßig nur das erste Akkordeon geöffnet ist und alle zuvor geöffneten geschlossen sind.

Mit dem Folgenden konnte ich nur das erste Akkordeon öffnen, das beim Laden der Seite angezeigt wird. Ich muss die Möglichkeit hinzufügen, alle zuvor geöffneten Akkordeons zu schließen, wenn auf ein anderes geklickt wird. Könntest du bitte dabei helfen? Ich suche nur nach einer reinen JS-Lösung. Die Seite, auf der ich dies tun muss, ist hier

 window.onload = function() {
  var accItem = document.getElementsByClassName('accordion__item');
  // Keep the first accordion open by default.
  for (i = 0; i < accItem.length; i++) {
    console.log("Within first for loop");
    accItem[i].addEventListener('click', toggleItem, false);
  }
  function toggleItem() {
    var itemClass = this.parentNode.className;
    for (i = 0; i < accItem.length; i++) {
      console.log("Within second for loop");
      accItem[i].className="accordion__item close";
    }
    if (itemClass == 'accordion__item close') {
        this.parentNode.className="accordion__item open";
    }
  }    
 };

Der HTML-Auszug der oben verlinkten Seite lautet:

<div class="col-12 accordion product__accordion margin__bottom--reduced">
    <input type="radio" id="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b--close" name="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b">
    <label class="accordion__item">
        <input type="radio" name="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b">
        <span class="accordion__item--title">Description<label class="collapse" for="a66f79b6-abe9-4e4e-9e91-0994a9c01b1b--close"></label></span>
        <div class="accordion__item--content inherit ">
                        <div><p>Send them a standout gift that’s environmentally friendly and multi-functional. We’ve paired our classic cedar wood journal with a black precision-point pen to add even more beauty to the written word. A sleek, double-insulated travel tumbler helps bring their favorite beverage along for the ride—and keeps it hot or cold—from coffee to wine. Choose this gift to celebrate a colleague, relative, or friend while also supporting reforestation efforts and eco-friendly production.<br></p>
<p>Each gift is packaged in our recyclable Packed with Purpose box and includes:<br></p>
<style type="text/css"><!--
td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
--></style>
<ul>
<li>Handcrafted classic wood journal, USA-Made (6" x 9")</li>
<li>Quick-drying, smudge-resistant fine point pen in black</li>
<li>Insulated stainless steel black beverage tumbler with removable drinking lid, 10 oz.<br>
</li>
<li>An artful booklet that showcases the stories of our Impact Partners and the meaningful impact our gifts create</li>
</ul>
<p></p></div>
        </div>
    </label>
</div>
<div class="col-12 accordion product__accordion margin__bottom--reduced">
    <input type="radio" id="cfa26ceb-62c7-4683-996a-6a3f79898c4d--close" name="cfa26ceb-62c7-4683-996a-6a3f79898c4d">
    <label class="accordion__item">
        <input type="radio" name="cfa26ceb-62c7-4683-996a-6a3f79898c4d">
        <span class="accordion__item--title">Impact<label class="collapse" for="cfa26ceb-62c7-4683-996a-6a3f79898c4d--close"></label></span>
        <div class="accordion__item--content inherit ">
<div><p></p>
<style type="text/css"><!--
td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}
--></style>
<p><strong><a href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/woodchuck-usa/" target="_blank"><span data-sheets-userformat="{&quot;2&quot;:513,&quot;3&quot;:{&quot;1&quot;:0},&quot;12&quot;:0}" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;WOODCHUCK USA&quot;}">WOODCHUCK US</span>A</a></strong>&nbsp;-&nbsp;Creates eco-friendly wood products and plants one tree for every purchase made to help reforest the world; made in the USA</p>
<p><strong><a href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/uchida/" data-mce-href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/uchida/">Marvy Uchida</a>&nbsp;</strong>- Inspires art and creativity for all through their high-quality arts, crafts, and office products for more than 40 years</p>
<p><span data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Reduces waste and energy consumption across the entire supply chain, and packages with 100% recycled cardboard. &quot;}" data-sheets-userformat="{&quot;2&quot;:13185,&quot;3&quot;:{&quot;1&quot;:0},&quot;10&quot;:2,&quot;11&quot;:4,&quot;12&quot;:0,&quot;15&quot;:&quot;Calibri&quot;,&quot;16&quot;:8}"><a href="https://packedwithpurpose.gifts/our-impact/purposeful-purveyors/ecovessel/"><strong>Ecovessel</strong></a>&nbsp;- Creates premium reusable drinkware to reduce the world's dependence on single-use plastics; 1% for the Planet member, woman-founded </span></p></div>
        </div>
    </label>
</div>
<div class="col-12 accordion product__accordion ">
    <input type="radio" id="04f337be-f8e2-41b0-9f06-740077e6b722--close" name="04f337be-f8e2-41b0-9f06-740077e6b722">
    <label class="accordion__item">
        <input type="radio" name="04f337be-f8e2-41b0-9f06-740077e6b722">
        <span class="accordion__item--title">Additional Info<label class="collapse" for="04f337be-f8e2-41b0-9f06-740077e6b722--close"></label></span>
        <div class="accordion__item--content inherit ">
                <p>Given the highly seasonal nature of gifting and the unique supply chain challenges presented by COVID-19, Packed with Purpose requests flexibility on the flavors, scents, and specific products featured in each gift. Our team thoroughly vets all products to guarantee any substitutions are of equal quality and impact and encompass the high standards we require of all our purveyors.</p>
        </div>
    </label>
</div>

Question 2

Ich würde es so machen. Die Hilfsfunktionen wirken direkt auf die DOM-Elemente, anstatt einen Klick zu simulieren.

//  an array of elements
const allAccordionElements = Array.from(document.querySelectorAll(".accordion__item"));

const run_code = () => {

  //  some helper functions
  const showTab = (el) => {
    el.style.display = "flex";
  };
  const hideTab = (el) => {
    el.style.display = "none";
  };

  if (allAccordionElements.length > 0) {
    
    // open the first one
    showTab(allAccordionElements[0]);
    
    //  hide all others
    allAccordionElements.slice(1).forEach(thisTab => {
      hideTab(thisTab);
    });  
  
  }
  
};

document.getElementById('run').addEventListener('click',run_code);

.accordion__item {
  padding: 0.5em;
  margin: 0.5em;
  border: 2px dotted green;
  background-color: silver;
  display: flex;
}

<div class="accordion">

  <div class="accordion__item">
    item one
  </div>
  <div class="accordion__item">
    item two
  </div>
  <div class="accordion__item">
    item three
  </div>

</div>

<button id="run">run code</button>

Question 3

Die Akkordeonsteuerung stellt die ein max-height CSS-Eigenschaft entweder 0 oder 420. Es ist so einfach wie jedes Akkordeon entsprechend einzustellen (hehe).

Öffnen:

.accordion__item .accordion__item--content { max-height: 420; }

Schließen:

.accordion__item .accordion__item--content { max-height: 0; }

Die Lösung besteht darin, das Click-Ereignis durch Folgendes zu ersetzen:

EDIT: Ich habe mich im ersten Post vertippt. Entfernen [0] und durch ersetzen forEach Schleife wie unten gezeigt.

window.onload = function() {
  let allAccordionElements = document.querySelectorAll(".accordion__item .accordion__item--content");
  if (allAccordionElements.length > 0) {
    // Close all to start
    allAccordionElements.forEach(a=>a.style.maxHeight = "0"); 
    // Open the first
    allAccordionElements[0].style.maxHeight = "420"; 
  } 
};