Bootstrap Collapsible List Group: প্যানেলের সাথে তালিকা প্রসারিত/সংকোচন

Bootstrap-এ একটি কোল্যাপসিবল (স্কোচনযোগ্য) লিস্ট গ্রুপ তৈরি করতে .panel-collapse এবং .list-group প্রোপার্টি একসাথে ব্যবহার করা হয়।

উদাহরণ

নিচের উদাহরণে ক্লিক করলে প্রশ্নের উত্তর বা তালিকা দেখানো/লুকানো হয়:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>প্রশ্ন/উত্তর</h2>
      <p>নিচে ক্লিক করলে সাক্ষাতকারের জন্য প্রযুক্তিগুলো জানতে পারবেন।</p>
      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#test">তথ্য</a>
            </h4>
          </div>
          <div id="test" class="panel-collapse collapse">
            <ul class="list-group">
              <li class="list-group-item">Java</li>
              <li class="list-group-item">PHP</li>
              <li class="list-group-item">C++</li>
              <li class="list-group-item">HTML5</li>
              <li class="list-group-item">jQuery</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

ব্যাখ্যা:

• data-toggle="collapse" - ক্লিক করলে কোল্যাপস টগল করে
• href="#test" - লক্ষ্য এলিমেন্টের ID
• class="collapse" - প্রাথমিকভাবে লুকানো অবস্থা
• .list-group এবং .list-group-item - স্টাইলড তালিকা

নোট: Bootstrap 4/5-এ প্যানেল বাদ দিয়ে .card কম্পোনেন্ট ব্যবহার করা হয়।