منوی آکاردئونی

کافیه یه شرط بزاری به این صورت که وقتی روی یک آکاردیون کلیک میشه کلاس اکتیو از همه آکاردیون ها بجز اونی که روش کلیک شده برداشته بشه :
یه چیزی شبیه به این :
داخل فور یک فور دیگه میزاریم

   for (var j = 0; j < acc.length; j++) {
                if (acc[j] !== this) {
                    acc[j].classList.remove("activ");
                    acc[j].nextElementSibling.style.maxHeight = null;
                }
            }

سپاس فراوان
درست شد
خداوند خیرتان بدهد

@mehdihoseini1362
سلام
متوجه یک چیزی شدم
با استفاده از کد box-shadow: 0 0 0px 1px #000000; یک خط مشکی دور سوال ها برای جلوه بهتر انداخته بودم
اما این خط برای باکس جواب ها نیست
با دادن کد به کلاس .panel { این خط دور باکس جواب ها هم نمایش داده شد و جلوه بهتری نشان داد
اما وقتی باکس سوالی بسته است یک خط مشکی زیر باکس سوال ها هست که ظاهر رو خراب کرده
آیا میشه این خط رو حذف کرد طوری که وقتی باکس بسته هست خط مشکی نباشه اما وقتی باکس جواب باز هست این خط مشکی دور باکس باشه؟

؟؟؟؟؟؟؟؟؟؟

همون کد قبلی برای همین هم کار می کنه . همون جا که کلاس اکتیو رو از همه آکاردیون ها بجز اونی که کلیک شده برمی داشتید ، همونجا کلاس سایه رو هم بردارید حل میشه .

  for (var j = 0; j < acc.length; j++) {

                if (acc[j] !== this) {

                    acc[j].classList.remove("activ");
/// اینجا کلاس سایه رو بردارید مثلا : 
                    acc[j].classList.remove("clasiKeBarayeSayeHast");
                    acc[j].nextElementSibling.style.maxHeight = null;

                }

            }

@mehdihoseini1362
سلام و درود
من این کلاس براش نوشتم

.panel {
  direction: rtl;
  width: 100%;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding: 0 15px;
  background-color: #e5d9ff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
.bs-1{
box-shadow: 0 0 0px 1px #000000;
}

و اون رو اینگونه فراخوانی کردم

<div class="panel bs-1">

تا اینجا درسته و برای حذف اون خط زیر کد زیر رو اینگونه ویرایش کردم

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("activ");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
for (var j = 0; j < acc.length; j++) {
                if (acc[j] !== this) {
                    acc[j].classList.remove("activ");
                    acc[j].classList.remove("bs-1"); 
                    acc[j].classList.remove("clasiKeBarayeSayeHast");
                    acc[j].nextElementSibling.style.maxHeight = null;

                }

            }
      });
    }
</script>

اما خط مورد نظر حذف نشد
خط 17 کد بالا درست ویراش شده؟

نه درست نیست چون تو خط 17 از پنل سایه رو حذف نمی کنه . اگر به آکاردیون سایه داده بودید کار می کرد. می تونید تو خط زیر سایه رو حذف کنید که به کلا پنل هم دسترسی دارید :

if (panel.style.maxHeight) {

panel.style.maxHeight = null;
        panel.classList.remove("bs-1"); 
} else {
    panel.style.maxHeight = panel.scrollHeight + "px";
}

البته الان با گوشی هستم نتونستم چک کنم ببنیم کار می کنه یا ن خ ولی یه خورده با کدهای اینجا کار کنید درست میشه .من زیاد به جاوااسکریپت اشنایی ندارم

@mehdihoseini1362
سلام و سپاس
نه متاسفانه درست کار نکرد
اگه زحمتی نیست کد جاوا را به صورت کامل از <script> تا </script> بفرستید
با تشکر فراوان

این کد رو تست کن احتمالا درست کار کنه
البته این کد بیش از حد لازم شلوغه میشه خیلی ساده ترش کرد

<script>
var acc = document.getElementsByClassName("accordion");

for (var i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    for (var j = 0; j < acc.length; j++) {
      if (acc[j] !== this) {
        acc[j].classList.remove("activ");
        var otherPanel = acc[j].nextElementSibling;
        if (otherPanel) {
          otherPanel.style.maxHeight = null;
          otherPanel.classList.remove("bs-1");
        }
      }
    }
    this.classList.toggle("activ");
    var panel = this.nextElementSibling;

    if (this.classList.contains("activ")) {
      panel.style.maxHeight = panel.scrollHeight + "px";
      panel.classList.add("bs-1");   
    } else {
      panel.style.maxHeight = null;
      panel.classList.remove("bs-1");
    }
  });
}
</script>

کلاس اکتیو هم غلط املایی داره منم مجبوری همون املای اشتباه رو تو کد گذاشتم خودتون بعدا اصلاح کنید .

سلام و درود
توی حالت اولیه هنوز اون خط هستش
اما با کلیک روی یکی از باکس ها ، اون خط حذف میشه و درست میشه
اما توی حالت اولیه هنوز اون خط وجود داره
🙏

چون من کد کامل شما رو ندیدم احتمالا داخل کدهای سی اس اس در حالت اولیه اون سایه رو به پنل اضافه کردید . کلا سایه رو از پنل حذف کنید که در حالت اولیه سایه نداشته باشه بعد این کد جاوااسکریپت موقع کلیک کردن روی هر آکاردیون سایه رو بهش اضافه می کنه . فکر کنم اینطوری حل بهش

@mehdihoseini1362
سلام و سپاس فراوان
بله درست شد
فقط یه مورد که فرمودید غلط املایی داخل کلاس اکتیو هست رو من پیدا نکردم
و اینکه فرمودید این کد خیلی شلوغه و میشه ساده‌ش کرد
اگه تونستید ساده‌ش کنید ممنون میشم

داخل کدهاتون نوشتید activ که درستش active هست .
بجای فور می تونید از فورایچ استفاده کنید : یه چیزی شبیه این :

<script>
const accs = document.querySelectorAll(".accordion");
accs.forEach(acc => {
  acc.addEventListener("click", function() {
    accs.forEach(a => {
      if (a !== this) {
        a.classList.remove("activ");
        const panel = a.nextElementSibling;
        if (panel) {
          panel.style.maxHeight = null;
          panel.classList.remove("bs-1");
        }
      }
    });
    this.classList.toggle("activ");
    const panel = this.nextElementSibling;
    if (panel) {
      panel.style.maxHeight = this.classList.contains("activ") ? panel.scrollHeight + "px" : null;
      panel.classList.toggle("bs-1", this.classList.contains("activ"));
    }
  });
});
</script>

داخل همین کد هم غلط املایی رو گذاشتم بمونه که خودتون اگر خواستید اصلاح کنید چون سی اس اس و اچ تی ام ال هم باید اصلاح بشه

@mehdihoseini1362
از لطفی که فرمودید و صبورانه جواب تمام سوالات بنده رو دادید بسیار سپاسگزارم
یا علی ع 🖐