বুটস্ট্রাপ Accordion কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Bootstrap তাদের accordion component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is shown.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden.
                </div>
            </div>
        </div>
    </div>

.accordion -> Accordion এর যেই style, এটা দেখতে সাধারণত যেরকম হয়, bootstrap এর এই class সেই styling করার একটা starting point. Accordion এর সব component এই class এর under এ রাখতে হয়।

.accordion-item -> accordion এর মধ্যে যত ধরনের item থাকবে সে সব কিছু এই class এর মধ্যে রাখা হয়। এই class ব্যবহার না করলে একটা item যে আরেকটা থেকে আলাদা সেটা identify করা যায়না দেখে। কারণ এই class আইটেম গুলোর মধ্যে horizontal line তৈরি করে করে partitioning করে।

.accordion-header -> accordion এর মধ্যে কোন item এর জন্য explaination দেওয়া আসে টা এই class এর under এ header হিসেবে লিখা হয়। এটা না লিখলেও styling এ তেমন কোনও পার্থক্য আসবে না। Just কিছুটা spacing এর পার্থক্য লক্ষ্য করতে পারেন।

.accordion-button -> accordion এর heading টা একটা বাটন এর মত কাজ করে বলা যায়, কারণ এটাতে click করলে expand হয়, আবার expanded থাকলে সেটা off হয়ে যায়। এই বাটন এর styling টা পুরো করা হয়েছে এই class এর আন্ডার এ।

data-bs-toggle="collapse" -> এটা ছাড়া accordion এর বাটন গুলো ঠিকঠাক মত expand on / off হবে না।

aria-expanded="true" -> এই property এর তেমন কোনও ব্যবহার চোখে পরবে না। এই property টা ব্যবহার না করলেও তেমন কোনও সমস্যা নেই।

data-bs-target="#collapseOne" id="collapseOne" -> data-bs-target="#collapseOne" এটা indicate করবে আপনি বাটন এ click করে কোন অংশটুকু expanded area হিসেবে দেখাতে চাচ্ছেন। যেই অংশটুকু দেখাতে চাচ্ছেন সেখানে id="collapseOne" ব্যবহার করা হয়।

.accordion-collapse .collapse -> expandable area র styling এর জন্য এই class গুলো use করা হয়েছে।

.show -> এটা ব্যাবহার করে আপনি default ভাবে কোনও একটা area expand করে রাখতে পারেন। এটা উঠিয়ে দিলে button click করার আগ পর্যন্ত কোনও area expandable দেখাবেনা।

id="accordionExample" data-bs-parent="#accordionExample" -> data-bs-parent="#accordionExample" এটা দ্বারা নির্দেশ করছে এই accordion item এর parent কোনটা। যেই accordion টা parent হিসেবে আছে সেখানে id="accordionExample" এভাবে id দেওয়া হয়েছে।

.accordion-body -> expandable area র styling specially spacing (margin, padding) দেওয়ার জন্য এই class use করা হয়েছে।

~let's_code_your_career
~happy_coding!!!