ساخت آکاردئون اختصاصی با CSS و jQuery
مقالات طراحی سایتچگونه بصورت سریع و تنها با چند خط کد CSS و کمی jQuery ، یک آکاردئون اختصاصی ، سبک و بسیار زیبا را طراحی و کدنویسی کنیم ؟
شاید شما نیز از دسته علاقمندانی باشید که تمایل بسیاری به طراحی المان‌های اختصاصی در قالب خودشان دارند . یک قالب HTML تشکیل شده از بخش‌های بسیاری است .
آکاردئون ، اسلایدر ، منو موبایلی و … همگی از الزامات یک قالب خوب و کاربر پسند هستند . البته که در فریمورک‌هایی همچون بوت استرپ ، یا کتابخانه‌هایی مثل jQueryUi ، از این المان‌ها بسیار زیاد داریم و می‌توانیم در کمتر از چند ثانیه ، اسلایدر و آکاردئون و امثال این موارد را در قالب ایجاد کنیم .
اگر احیانا اطلاع ندارید که آکاردئون چیست ، مثال زیر یک آکاردئون است که توسط فریمورک بوت استرپ ارائه می‌شود :
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.اما به دلایلی ممکن است قصد داشته باشید خودتان به تنهایی این مدل کامپوننت‌ها را در قالب طراحی کنید . شخصا علاقه داریم تا خودمان دست به کد شویم از همین جهت ، امروز یک سورس کد بسیار خوب و کوتاه جهت ایجاد آکاردئون خدمت شما ارائه خواهیم کرد .
ساخت کد HTML برای آکاردئون
آکاردئون متشکل از یک عنوان و یک زیر عنوان است . این المان می‌تواند حالات مختلفی داشته باشد برای مثال :
- فرزند اول آکاردئون بصورت بازشده نمایش داده شود و با کلیک روی فرزندان بسته دیگر ، سایر فرزندهای باز ، بسته شوند .
- فرزند اول آکاردئون بصورت بازشده نمایش داده شود و با کلیک روی فرزندان دیگر ، سایر فرزندها تغییری نداشته باشند و اگر باز هستند ، باز بمانند مگر اینکه جهت بستن روی آنها کلیک کنیم
- فرزند اول آکاردئون بسته باشد و با کلیک روی هر فرزند ، باز شوند ، بسته شدن یا بسته نشدن سایر فرزندها نیز بستگی به کدنویسی شما دارد
پس همانطور که مشاهده می‌کنید ، ایجاد دیزاین در آکاردئون یک موضوع شخصی و سلیقه‌ای است . نمونه‌ای که در این مثال خدمت شما ارائه خواهیم کرد ، بدین شکل است که فرزند اول آکاردئون باز است و با کلیک روی سایر فرزندان بسته ، سایر فرزندان باز ، بسته خواهند شد . اکنون به ساختار HTML این بخش برسیم :
<div class="faq-main">
<div class="faq-holder p-4 border border-2 rounded mt-2">
<h4 class="p-0 m-0 fs-5 fw-bold">Accordion Item #1</h4>
<p class="p-0 m-0 pt-2 mt-1 px-3 lh-lg fs-6 opacity-75 text-justify">
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
</p>
</div>
<div class="faq-holder p-4 border border-2 rounded mt-2">
<h4 class="p-0 m-0 fs-5 fw-bold">Accordion Item #2</h4>
<p class="p-0 m-0 pt-2 mt-1 px-3 lh-lg fs-6 opacity-75 text-justify">
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
</p>
</div>
<div class="faq-holder p-4 border border-2 rounded mt-2">
<h4 class="p-0 m-0 fs-5 fw-bold">Accordion Item #3</h4>
<p class="p-0 m-0 pt-2 mt-1 px-3 lh-lg fs-6 opacity-75 text-justify">
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
</p>
</div>
</div>کد HTML شما آماده است . توجه کنید که اسامی کلاس‌هایی که در داخل کد استفاده شده است مثل border و mt-2 و … همگی کلاس‌های بوت استرپ هستند و شما می‌توانید برای هربخش ، استایل مدنظر خودتان را بنویسید .
همانطور که مشاهده می‌کنید این سورس کد بسیار ساده بوده و شامل یک عنوان و یک زیر عنوان است . اما اگر از این کد خروجی بگیرید ، یک ظاهر ساده و عادی دارد .
کد CSS برای آکاردئون
اکنون زمان آن خواهد رسید که کد CSS آن را بنویسید که این قسمت یک کد اصلی دارد که حتما باید نوشته شود اما درمورد رنگ و حاشیه و … برای تگ‌های h4 و p خودتان مختار هستید . کد CSS زیر را حتما باید در دستورات خود قرار دهید :
.faq-main .faq-holder p {
display: none;
}
.faq-main .faq-holder:first-child p {
display: block;
}
.faq-main .faq-holder h4{
cursor: pointer;
}
.faq-holder-active {
border-color: red !important;
}قسمت active را برای زمانی درنظر داریم که یک آیتم فعال است و رنگ حاشیه را تغییر داده‌ایم .
در این کد CSS ابتدا تمامی تگ‌های p را مخفی کردیم که زیر عنوان‌ها نمایش داده نشوند ، سپس توسط first-child ، اولین زیرعنوان را باز کردیم تا اولین آیتم همیشه باز باشد دقیقا همانند مثال بالا در بوت استرپ ! اکنون زمان آن خواهد رسید که کد جی کوئری مربوط به کار این آکاردئون را بنویسیم تا با کلیک روی هر عنوان ، زیر عنوان‌ها و همچنین سایر فرزندان عکس العمل نشان دهند !
کد jQuery برای آکاردئون
اکنون برای اینکه این آکاردئون به سادگی برای شما کار کند و موقع کلیک بصورت دقیق عمل نماید ، ابتدا باید کتابخانه جی کوئری را داخل پروژه خودتان اضافه کنید و نهایتا قطعه کد زیر را داخل یک تگ script و بعد از آدرس دهی کتابخانه جی کوئری قرار دهید ، اگر اطلاع ندارید که این کار را چگونه انجام دهید ، ما کتابخانه جی کوئری را نیز در زیر آدرس دهی کردیم و کد مربوط را در ادامه آن قرار دادیم :
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
jQuery(".faq-main .faq-holder").first().addClass("faq-holder-active");
jQuery(".faq-main .faq-holder").click(function(){
jQuery(".faq-main .faq-holder").find("p").slideUp();
jQuery(".faq-main .faq-holder").removeClass("faq-holder-active");
jQuery(this).find("p").slideToggle();
});
jQuery(".faq-main .faq-holder").click(function(){
jQuery(this).toggleClass("faq-holder-active");
}
</script>اکنون زمان آن رسیده است که این کد را در سیستم خودتان تست کرده و از آن خروجی بگیرید . توجه داشته باشید که می‌توانید در این کد مواردی همچون آیکون را نیز اضافه کنید که البته کمی کدنویسی شما در بخش جی کوئری بیشتر خواهد شد .
البته اگر روش کار این کد را کمی بررسی کنید خواهید دید که بسیار ساده است و می‌توانید خودتان قسمت آیکون را نیز به کد خودتان اضافه کنید .
از این سورس کد می‌توانید برای تمامی پروژه‌های خودتان بصورت اختصاصی استفاده کرده و آن را شخصی سازی کنید . درصورتی که چنین مواردی را خودتان ایجاد کنید ، قادر هستید تا بسادگی در تمامی پروژه‌های طراحی ، تغییرات را سریع و ساده انجام دهید . امید است این محتوا برای شما مفید و کاربردی واقع شود ، موفق باشید .
