মার্কডাউন কোলাপসিবল সেকশন কী?
মার্কডাউন প্লেইন টেক্সট নথি, README ফাইল ও ডেভেলপার ডকুমেন্টেশন ফরম্যাট করার সরলতার জন্য পরিচিত। তবে স্ট্যান্ডার্ড মার্কডাউন সিনট্যাক্সে ইন্টারঅ্যাকটিভ অ্যাকর্ডিয়ন উইজেট বা কোলাপসিবল কন্টেন্ট টগলের নেটিভ সাপোর্ট নেই। ভারী JavaScript নির্ভরতা ছাড়াই সমাধান করতে আধুনিক মার্কডাউন পার্সার ইনলাইন HTML5 ট্যাগ সাপোর্ট করে—বিশেষ করে <details> ডিসক্লোজার এলিমেন্ট ও <summary> ক্যাপশন এলিমেন্ট।
আমাদের ফ্রি অনলাইন মার্কডাউন কোলাপসিবল সেকশন জেনারেটর দিয়ে দীর্ঘ টেকনিক্যাল স্পেসিফিকেশন, ভার্বোস লগ আউটপুট, বিস্তৃত FAQ সেকশন ও অতিরিক্ত কোড স্যাম্পলকে পরিষ্কার, এক্সপান্ডেবল ড্রপ-ডাউন কন্টেইনারে রূপান্তর করুন। এতে প্রয়োজনীয় ব্যাকগ্রাউন্ড কন্টেন্ট না হারিয়ে নথির স্ক্যানেবিলিটি ও ইউজার এক্সপেরিয়েন্স বাড়ে।
HTML5 Details ও Summary সিনট্যাক্স
যেকোনো মার্কডাউন অ্যাকর্ডিয়ন টগল দুটি স্ট্যান্ডার্ড HTML ট্যাগের উপর দাঁড়ায়:
<details>র্যাপার ট্যাগ: দৃশ্যমান টগল টাইটেল ও লুকানো এক্সপান্ডেবল বডি দুটোই ধরে। ঐচ্ছিকopenঅ্যাট্রিবিউট (<details open>) যোগ করলে পেজ বা README লোডে কন্টেইনার ডিফল্টে খোলা থাকে।<summary>হেডিং ট্যাগ: ব্যবহারকারী যে শিরোনাম বা লেবেলে ক্লিক করে অন্তর্নিহিত কন্টেন্ট দেখেন তা নির্ধারণ করে। কাস্টম স্টাইলিং, টেক্সট ফরম্যাটিং ও ইনলাইন মার্কডাউন প্রায়ই এই এলিমেন্টের ভিতরে বা পাশে ব্যবহার করা যায়।
স্ট্যান্ডার্ড সিনট্যাক্স স্ট্রাকচার উদাহরণ:
<details>
<summary>Click here to view detailed setup instructions</summary>
### Prerequisites
- Node.js v18+
- npm or yarn
Run the following command to install dependencies:
```bash
npm install utiliome-tools
</details>
```[!IMPORTANT] মার্কডাউন পার্সারের জন্য প্রো-টিপ: বেশিরভাগ মার্কডাউন প্রসেসর (যেমন GitHub Flavored Markdown)
</summary>ট্যাগের পরে বডি কন্টেন্ট শুরুর আগে একটি খালি লাইন চায়। এই খালি লাইন না থাকলে নেস্টেড মার্কডাউন সিনট্যাক্স যেমন হেডার (###), তালিকা (-), বা ফেন্সড কোড ব্লক (```) পার্সড HTML না হয়ে কাঁচা আনফরম্যাটেড টেক্সট হিসেবে রেন্ডার হয়।
এক্সপান্ডেবল কোলাপসিবল কন্টেন্টের সাধারণ ব্যবহার
1. GitHub README ফাইল পরিষ্কার রাখা
রিপোজিটরিতে প্রায়ই বিস্তারিত সেটআপ নির্দেশনা, এনভায়রনমেন্ট ভেরিয়েবল তালিকা, চেঞ্জ লগ ও API রেফারেন্স প্যারামিটার লাগে। সবকিছু এক পাতায় রাখলে অন্তহীন স্ক্রল হয়। লম্বা কমান্ড লগ, এনভায়রনমেন্ট কনফিগ ও ডিপেন্ডেন্সি ম্যাট্রিক্স কোলাপসিবল <details> ব্লকে মুড়ে README পরিষ্কার ও অ্যাক্সেসযোগ্য রাখুন।
2. পরিষ্কার FAQ পেজ তৈরি
Frequently Asked Questions স্বাভাবিকভাবেই অ্যাকর্ডিয়ন লেআউটে ফিট করে। কোলাপসিবল HTML ট্যাগ দিয়ে ব্যবহারকারী উচ্চ-স্তরের প্রশ্ন দ্রুত স্ক্যান করে শুধু প্রাসঙ্গিক উত্তর খুলতে পারেন।
3. টেস্ট রেজাল্ট ও স্ট্যাক ট্রেস লুকানো
GitHub, GitLab বা Bitbucket-এ পুল রিকোয়েস্ট বর্ণনা বা ইস্যু রিপোর্ট প্রকাশ করার সময় বিশাল স্ট্যাক ট্রেস বা অটোমেটেড টেস্ট আউটপুট আলোচনা থ্রেড নষ্ট করে। লগ আউটপুট কোলাপসড টগল সেকশনে মুড়ে রাখলে রিভিউয়ারদের জন্য পূর্ণ ডায়াগনস্টিক বিবরণ থাকে, অথচ মূল কথোপকথন চাপা পড়ে না।
4. ইন্টারঅ্যাকটিভ ডকুমেন্টেশন ও নলেজ বেস সাজানো
Docusaurus, MkDocs, Hugo, Jekyll ও GitBook HTML details এলিমেন্ট নির্বিঘ্নে রেন্ডার করে। মাল্টি-স্টেপ টিউটোরিয়াল, অ্যাডভান্সড এজ কেস ও কোড স্নিপেট কোলাপসিবল প্যানেলে ভাগ করে টেকনিক্যাল পাঠকের কগনিটিভ ওভারলোড কমান।
প্ল্যাটফর্ম সামঞ্জস্য গাইড
| Platform / Parser | Collapsible <details> Support |
Markdown Inside Details Support | Notes |
|---|---|---|---|
| GitHub (GFM) | Full Native Support | Fully Supported (Requires blank line after <summary>) |
Ideal for README.md, PR descriptions, and issue comments. |
| GitLab | Full Native Support | Fully Supported | Standard HTML details/summary parsing. |
| Notion | Native Toggle List Block | Supported via Import | Imports cleanly or pastes as toggle blocks. |
| Obsidian | Native & HTML Support | Fully Supported | Supports both plugin toggles and standard HTML tags. |
| Azure DevOps | Partial Support | Basic Support | Supports simple details tags in wiki pages. |
| Jekyll / Hugo | Full Native Support | Requires Markdown extension configuration | Ensures valid HTML output across static site builds. |
মার্কডাউন অ্যাকর্ডিয়ন ডিজাইনের বেস্ট প্র্যাকটিস
- স্পষ্ট, অ্যাকশনেবল সারাংশ শিরোনাম ব্যবহার করুন: "More Info"-এর মতো অস্পষ্ট শিরোনাম এড়িয়ে "View Full Benchmark Results" বা "Click to Expand Environment Variable Template"-এর মতো স্পষ্ট শিরোনাম দিন।
- ভিজুয়াল কিউ বা ইমোজি যোগ করুন: সারাংশ ট্যাগে তীর চিহ্ন, ফোল্ডার আইকন বা ইমোজি (যেমন
▶️,🔍,📋) দিলে সেকশন ইন্টারঅ্যাকটিভ বলে তাৎক্ষণিক ভিজুয়াল ফিডব্যাক মেলে। - নেস্টেড স্ট্রাকচার সঠিকভাবে ইন্ডেন্ট রাখুন: কঠোর মার্কডাউন কম্পাইলারে সিনট্যাক্স ভাঙা এড়াতে নেস্টেড HTML বা মার্কডাউন ব্লকের ইন্ডেন্টেশন পরিষ্কার রাখুন।
GitHub-এ সিনট্যাক্স ফাঁদ ও সাইজ সীমার জন্য দেখুন collapsible sections in GitHub Markdown।