سلام. وقت بخیر

ممنون می‌شم کدتون رو قرار بدید تا بررسی کنیم.

https://jsfiddle.net/Sotoodeh/9eu87124/

سلام. وقت شما بخیر

پیشنهاد می‌کنم نمونه زیر رو ببینید و کدهاش رو تحلیل کنید و کدتون رو با توجه به این ادیت کنید:
https://codepen.io/Sahar_Pashaei/pen/NWZwerp

یه سری توضیحاتم عرض کنم خدمتتون:
در این قسمت، یه سری تب داریم که هر کدومشون یه سوال رو نمایش میدن. وقتی روشون کلیک کنیم، جواب سوال زیرشون باز می‌شه. این قضیه با استفاده از input هایی که از نوع checkbox هستن مدیریت می‌شه.

تب‌ها (.tab)

هر تب، شامل یک input از نوع checkbox، یک label که متن سوال رو نمایش میده و یک div با کلاس tab-content هست که متن جواب توش قرار می‌گیره.

• input رو عملاً کاربر نمی‌بینه چون display: none; شده.
• وقتی که روی label کلیک می‌کنید، input فعال می‌شه (یعنی چک می‌شه).

انیمیشن باز شدن تب‌ها

• .tab-content اولش height: 0; داره، یعنی اصلاً دیده نمی‌شه. وقتی که input چک شد، CSS میاد و height این تب رو به 100px تغییر میده و یه کم padding هم بهش اضافه می‌کنه تا متن جواب دیده بشه.
• این تغییرات با یه transition نرم همراهه که باعث می‌شه باز و بسته شدن تب‌ها خیلی روان باشه.

فلش کنار سوالات (.tab-label::after)

• اون فلش که سمت راست هر سوال هست هم وقتی روی سوال کلیک می‌کنید و تب باز می‌شه، این فلش یه چرخش 90 درجه می‌کنه که نشون بده این سوال الان باز شده.