کارهای امروز تمام شده بود. فرانتیوم همیشه وقتی از محل کار به سمت خانه می‌رفت، کمی دلگیر می‌شد. هندزفری‌اش را در گوش می‌گذاشت و مسیرِ شرکت تا خانه را پیاده طی می‌کرد. فردا روز تولدش بود، اما از وقتی برای تغییر و تحول در زندگی‌اش دور از خانواده تنها زندگی می‌کرد، این فکر که قرار است تولدی تنها داشته باشد، غمگینش می‌کرد.

در مسیر خانه یک سازفروشی بود. فرانتیوم همیشه محو نگاه کردن به آن ساز جادویی یعنی آکاردئون می‌شد. اما با خودش می‌گفت: «نباید چیزی برای خودم بخرم، باید پولم را جمع کنم. کاش کسی بود که روز تولدم آن ساز را به من هدیه می‌داد.» فردا وقتی وارد شرکت شد و به میز کارش رسید، چشمش به یک جعبه‌ی کادوی بزرگ و یک کارت افتاد. روی کارت نوشته بود: «یادت باشه که بکندیوم خیلی دوستت داره :)»

فرانتیوم وقتی آکاردئون جادویی را دید، با خودش گفت: «بذار قبل از اینکه ساز زدن رو شروع کنم، یک لیست آکاردئونی برای سایت خودم درست کنم.»

پروژه‌ی اولیه

برای دانلود پروژه‌ی اولیه روی این لینک کلیک کنید.

accordion/
├─ fonts/
├─ index.html
├─ index.js
└─ styles.css

جزئیات پروژه

هدف ما در این سوال، پیاده‌سازی لیست آکاردئونی است که می‌توانید عملکرد کلی برنامه را در گیف زیر مشاهده کنید:

وضعیت اولیه‌ی آکاردئون‌ها

در شروع بارگذاری صفحه، همه‌ی آکاردئون‌ها باید بسته باشند (کلاس active نداشته باشند و max-height آن‌ها برابر با 0 پیکسل باشد).

باکس‌های راهنما را مطالعه کنید و پیاده‌سازی‌ها را مطابق با دستورالعمل‌های ارائه‌شده انجام دهید.

خیلی خوش اومدی به یک مسابقه‌ی دیگه‌ی کوئرایی، امیدوارم به اون نتیجه‌ای که میخوای برسی و یادت باشه که همیشه تا لحظه‌ی آخر تلاش بکنی ; )

آکاردئون با دیتاست n باز شد

آکاردئون با دیتاست 2 باز شد

آکاردئون با دیتاست n بسته شد

آکاردئون با دیتاست 1 بسته شد

آکاردئون با دیتاست 0 بسته شد
آکاردئون با دیتاست 2 باز شد

آن‌چه باید آپلود کنید

• توجه: پس از پیاده‌سازی موارد خواسته شده، فایل index.js را برای سیستم داوری ارسال کنید.

• توجه: شما مجاز به افزودن فایل جدیدی در این ساختار نیستید و تنها باید تغییرات را در فایل‌ index.js اعمال کنید.

• توجه: برای هر قسمت از آکاردئون دقیقاً همان id و class ای را در نظر بگیرید که در بخش جزئیات پیاده‌سازی مشخص شده است؛ در غیر این صورت، استایل‌ها به درستی اعمال نمی‌شوند و نمره‌ای دریافت نخواهید کرد.

• توجه: در نهایت باید دقیقاً ۶ آکاردئون در accordion_container وجود داشته باشد؛ نه کمتر و نه بیشتر.

• توجه: آکاردئون فقط با کلیک روی accordion_title باز و بسته می‌شود. اگر برای سایر بخش‌ها رویدادی تعریف شود، نمره‌ای تعلق نخواهد گرفت.

• توجه: برای هر المان مربوطه یک data-attribute مقداردهی کنید که مقدار آن برابر با اندیس همان المان باشد.

• توجه: مقدار data-id برای آکاردئون‌ها باید به ترتیب از ۰ تا ۵ تنظیم شود.