كيفية إنشاء مكون طي accordion شبيه بالخاص ببوتسراب عن طريق الجافاسكربت؟

مرحبا .

الخطا فى هذا الجزء من الكود 

const allplus =document.querySelectorAll(".plus")
  // 
allplus.forEach(item => {
item.addEventListener("click", (eo) => {

const content=document.getElementsByClassName("content")[0] // الخطا هنا حيث يقوم دائما باخذ العنصر الاول من ال array

  content.classList.toggle("mm")
})


});

 ولحل المشكلة نريد كل عنصر ان ياخد ال class الخاص بالابن له ويمكننا تنفيذه كالتالى .

const allplus =document.querySelectorAll(".plus")
  // 
allplus.forEach((item,index) => {
item.addEventListener("click", (eo) => {

const content=document.getElementsByClassName("content")[index] // هنا قمنا باستخدام متغير لمكان العنصر وبذلك كل عنصر يستخدم الchild الخاص به

  content.classList.toggle("mm")
})


});

يحدث هذا لأنك تقومين بإظهار العنصر الأول عند استهداف اي حدث ضغط يخص عناصر + في:

const content = document.getElementsByClassName("content")[0];

سيعني هذا اختفاء واظهار العنصر الاول عند الضغط على علامة + الاولى والثانية بذات الوقت.

لتجاوز هاته المشكلة، سنحتاج تمييز اشارة ال + الاولى عن الثانية، لنقم بتعريف فهرس المكون المستهدف في عنصر الاشارة + الذي نريده. ثم سيسهل تحديده عن طريق الجافاسكربت عند الضغط عليه وبالتالي اظهار او اخفاء العنصر المراد.

لنقم باضافة الخاصيتين data-target-index في كل من عنصري plus كـ:

• العنصر الاول

<span class="plus" data-target-index="0">+</span>

• العنصر الثاني

<span class="plus" data-target-index="1">+</span>

ثم عن طريق الجافاسكربت نقوم اولا بالتقاط القيمة المخزنة في data-target-index الخاصة بالعنصر المضغوط عليه:

allplus.forEach(item => {
     item.addEventListener("click", (eo) => {
          var target = item.dataset.targetIndex;

وأخيرا استعمال الفهرس المحصل عليه في تحديد العنصر المستهدف واظهاره او اخفاءه:

var content = document.getElementsByClassName("content")[target];

content.classList.toggle("mm")

• فهم الأحداث في جافاسكربت
• التفريق بين السمات (attributes) في HTML والخاصيات (properties) في جافاسكربت