کارهای امروز تمام شده بود. **فرانتیوم** همیشه وقتی از محل کار به سمت خانه می‌رفت، کمی دلگیر می‌شد. هندزفری‌اش را در گوش می‌گذاشت و مسیرِ شرکت تا خانه را پیاده طی می‌کرد. فردا روز تولدش بود، اما از وقتی برای تغییر و تحول در زندگی‌اش دور از خانواده تنها زندگی می‌کرد، این فکر که قرار است تولدی تنها داشته باشد، غمگینش می‌کرد. در مسیر خانه یک سازفروشی بود. فرانتیوم همیشه محو نگاه کردن به آن ساز جادویی یعنی **آکاردئون** می‌شد. اما با خودش می‌گفت: «نباید چیزی برای خودم بخرم، باید پولم را جمع کنم. کاش کسی بود که روز تولدم آن ساز را به من هدیه می‌داد.» فردا وقتی وارد شرکت شد و به میز کارش رسید، چشمش به یک جعبه‌ی کادوی بزرگ و یک کارت افتاد. روی کارت نوشته بود: «یادت باشه که بکندیوم خیلی دوستت داره :)» فرانتیوم وقتی آکاردئون جادویی را دید، با خودش گفت: **«بذار قبل از اینکه ساز زدن رو شروع کنم، یک لیست آکاردئونی برای سایت خودم درست کنم.»**  # **پروژه‌ی اولیه** برای دانلود **پروژه‌ی اولیه** روی [این لینک](/contest/assignments/84122/download_problem_initial_project/307255/) کلیک کنید. <details class="red"> <summary>**ساختار فایل‌ها**</summary> ```plaintext accordion/ ├─ fonts/ ├─ index.html ├─ <mark class="orange" title="این فایل را تکمیل کنید">index.js</mark> └─ styles.css ``` </details> # **جزئیات پروژه** هدف ما در این سوال، **پیاده‌سازی لیست آکاردئونی** است که می‌توانید عملکرد کلی برنامه را در گیف زیر مشاهده کنید:  ### وضعیت اولیه‌ی آکاردئون‌ها در شروع بارگذاری صفحه، همه‌ی آکاردئون‌ها باید بسته باشند (کلاس `active` نداشته باشند و `max-height` آن‌ها برابر با `0` پیکسل باشد). باکس‌های راهنما را مطالعه کنید و پیاده‌سازی‌ها را مطابق با دستورالعمل‌های ارائه‌شده انجام دهید. <details class="purple"> <summary>**پیاده‌سازی accordions_container** </summary>  </details> <details class="purple"> <summary>**پیاده‌سازی accordion_body** </summary>  </details> <details class="purple"> <summary>**پیاده‌سازی accordion_title** </summary>  </details> <details class="purple"> <summary>**پیاده‌سازی accordion_content** </summary>  ```plaintext خیلی خوش اومدی به یک مسابقه‌ی دیگه‌ی کوئرایی، امیدوارم به اون نتیجه‌ای که میخوای برسی و یادت باشه که همیشه تا لحظه‌ی آخر تلاش بکنی ; ) ``` </details> <details class="brown"> <summary>**پیاده‌سازی click event** </summary>  </details> <details class="brown"> <summary>**وضعیت log** </summary> در **فایل** `index.html` **یک تگ با آیدی** `log` مشاهده می‌کنید. شما باید با استفاده از `data-id` ای که پیش‌تر ساختید، وقتی آکادرئونی **باز** می‌شود، چنین محتوای متنی‌ای نمایش دهید: ```plaintext آکاردئون با دیتاست n باز شد ``` ```plaintext آکاردئون با دیتاست 2 باز شد ``` + به عنوان مثال برای **باز شدن آکاردئون سوم،** متن نمایش داده شده به صورت بالا خواهد بود. **توجه داشته باشید** که اعداد آکاردئون‌ها می‌بایست **حتما به صورت انگلیسی بوده،** همچنین متن نوشته شده باید **بدون هیچ تغییر اضافه‌ای باشد.** هنگام بسته شدن آکاردئون‌ها نیز شما باید متنی به شکل زیر نمایش دهید: ```plaintext آکاردئون با دیتاست n بسته شد ``` ```plaintext آکاردئون با دیتاست 1 بسته شد ``` + به عنوان مثال برای **بسته شدن آکاردئون دوم،** متن نمایش داده شده به صورت بالا خواهد بود. **توجه داشته باشید** که اعداد آکاردئون‌ها می‌بایست **حتما به صورت انگلیسی بوده،** همچنین متن نوشته شده باید **بدون هیچ تغییر اضافه‌ای باشد.**  + در صورتی که **آکاردئون اول باز** بوده و ما روی **آکاردئون سوم** کلیک کردیم، متون نمایش داده شده به شکل زیر خواهد بود: ```plaintext آکاردئون با دیتاست 0 بسته شد آکاردئون با دیتاست 2 باز شد ```  </details> # **آن‌چه باید آپلود کنید** + **توجه**: پس از پیاده‌سازی موارد خواسته شده، **فایل** `index.js` را برای سیستم داوری ارسال کنید. + **توجه**: شما مجاز به افزودن فایل جدیدی در این ساختار **نیستید** و تنها باید تغییرات را در **فایل‌** `index.js` اعمال کنید. + **توجه:** برای هر قسمت از آکاردئون **دقیقاً همان** `id` و `class` ای را در نظر بگیرید که در بخش جزئیات پیاده‌سازی مشخص شده است؛ در غیر این صورت، **استایل‌ها به درستی اعمال نمی‌شوند** و **نمره‌ای دریافت نخواهید کرد.** + **توجه:** در نهایت باید **دقیقاً ۶ آکاردئون** در `accordion_container` وجود داشته باشد؛ **نه کمتر و نه بیشتر.**  + **توجه:** آکاردئون **فقط با کلیک روی** `accordion_title` **باز و بسته** می‌شود. اگر برای سایر بخش‌ها رویدادی تعریف شود، **نمره‌ای تعلق نخواهد گرفت.** + **توجه:** برای هر المان مربوطه یک `data-attribute` **مقداردهی کنید که مقدار آن برابر با اندیس همان المان باشد.** + **توجه:** مقدار `data-id` برای آکاردئون‌ها باید به ترتیب از ۰ تا ۵ تنظیم شود.