DEV Community

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

Posted on • Edited on

2 1

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

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

Image description

<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>

Enter fullscreen mode Exit fullscreen mode

.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!!!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more