آکاردئون Accordion
آکاردئون یک جمع شونده باز شونده عمودی است، که با استفاده از جاوا اسکریپ مدیریت میشود.
با استفاده از تکنیک جمع شونده و دادن استایل به آن، شما میتوانید یک آکاردئون داشته باشید.
برای نمایش انواع مختلف به مثالهای زیر توجه کنید.
ساختار
تمای اجزا درون یک div از کلاس accordion قرار میگیرند، wn-type هم باید accordion تنظیم شود. سپس یک div دیگر، از کلاس accordion-item مشخص میکند، هر ردیف دارای چه اجزایی است، به تعداد ردیف ها باید از این جزء داشته باشید.
درون هر div از کلاس accordion-item با دو جزء مواجه هستیم. عنوان و بدنه.
برای تعریف جز عنوان یه موضوع با کلاس accordion-header نیاز است، هر آنچه که درون این جزء باشد در عنوان نمایش داده میشود.
جزء بدنه با کلاس accordion-body مشخص میگردد، هر متن html درون آن قابل نمایش است.
خصوصیات
mode
اگر میخواهید در آن واحد فقط یکی از اجزا نمایش داده شود و باانتخاب جزء بعدی بقیه بسته شده و جزء انتخاب شده باز شود، از مقدار single استفاده کنید
اگر میخواهید هر جزء قابلیت باز یا بسته بودن داشته باشد، از مقدار multiple استفاده کنید.
selected-index
شماره موضوعی که باید در ابتدا باز باشد را مشخص میکند. این خصوصیت برای حالت single کاربرد دارد.
بسته بودن در ابتدا
اگر در حالت multiple هستید و میخواهید برخی از اجزا بسته باشند، به کلاس مرتبط با accordion-header کلاس collapsed را اضافه کنید و همچنین به جزء مرتبط با بدنه کلاس accordion-collapse را اضافه کنید
LTR
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
RTL
این اولین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
این دومین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
این سومین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
باز بودن تنها یک جزء
برای آنکه فقط یک جزء باز باشد، خصوصیت mode را single انتخاب کنید و سپس شماره جزءی که میخواهید باز باشد را در خصوصیت selected-item مشخص کنید، مقدار -1 یعنی همه بسته باشند.
به مثال زیر توجه کنید.
LTR
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
RTL
این اولین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
این دومین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
این سومین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
آکاردئون بدون لبه
اگر تمایل دارید، آکاردئون شما بدونه لبه باشد، میتوانید از کلاس accordion-noedge استفاده کنید.
به مثال زیر توجه کنید.
LTR
This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
.body, though the transition does limit overflow.
RTL
این اولین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
این دومین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
این سومین بدنه از آکاردئون است. همه بدنه ها بطور پیش فرض مخفی هستند مگر با انتخاب کلاس مناسب آن،
سیستم جمع کننده خود آنرا مدیریت میکند، تنها باید به صورت دستی، بدنه ای که باید نمایش داده شود را شبیه سازی کرد.
برای درج اطلاعات در بدنه، میتوانید از سیستم فاصله گذاری، مرتب کردن متن و انواع کلاسهای مرتبط استفاده کنید.
حتی با تغییر در کلاس
.body میتوانید شکل آنرا به صورتی که میخواهید تغییر دهید.
همیشه توجه داشته باشید، سیستم رنگ بندی، به شما کمک میکند، اشکال مختلفی از اجزا را داشته باشید.
رنگها
همانند بقیه موضوعات میتوانید از کلاس های رنگی استفاده کنید.
به مثال زیر توجه کنید.
LTR
Some Text
Some Text
RTL
متنی جهت آزمایش
متنی جهت آزمایش
LTR
Some Text
Some Text
RTL
متنی جهت آزمایش
متنی جهت آزمایش
اندازه
همانند بقیه موضوعات میتوانید از کلاس های اندازه گذاری استفاده کنید.
به مثال زیر توجه کنید.
LTR
Some Text
Some Text
RTL
متنی جهت آزمایش
متنی جهت آزمایش