বুটস্ট্রাপ কলাপ্স - Bootstrap Collapse

বুটস্ট্রাপ বেসিক কলাপ্সিবল

বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য বুটস্ট্রাপ "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Collapse Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>বেসিক কলাপ্সিবলের উদাহরণ</h3>
          <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapse">বেসিক কলাপ্সিবল</button>
          <div id="collapse" class="collapse">
            ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা
            বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন
            প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
          </div>
	    </div>

   </body>
</html>

ফলাফল

উদাহরণের ব্যাখ্যা

.collapse ক্লাসের মাধ্যমে একটি কলাপ্সিবল এলিমেন্টকে বুঝানো হয়েছে। বাটনে ক্লিক করার সাথে সাথে কন্টেন্ট টি দেখা যায় আর ক্লিক করলে তা চলে যায়।

কলাপ্সিবল কন্টেন্টকে নিয়ন্ত্রন(দেখানো/লুকানো) করার জন্য, <a> অথবা <button> এলিমেন্টের মধ্যে data-toggle="collapse" এট্রিবিউট যুক্ত করুন।

তারপর বাটন বা লিংকের সাথে কলাপ্সিবল কন্টেন্টকে (<div id="collapse">) সংযুক্ত করার জন্য করার জন্য data-target="#idName" এট্রিবিউট যুক্ত করুন।

নোটঃ <a> এলিমেন্টে data-target এট্রিবিউটের পরিবর্তে href এট্রিবিউট ব্যবহার করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Collapse Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>বেসিক কলাপ্সিবলের উদাহরণ</h3>
          <a href="#collapse" class="btn btn-info" data-toggle="collapse">বেসিক কলাপ্সিবল</a>
          <div id="collapse" class="collapse">
            ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা
            বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন
            প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
          </div>
	    </div>

   </body>
</html>

ফলাফল

ডিফল্টভাবে, কলাপ্সিবল কন্টেন্ট লুকানো অবস্থায় থাকে। ডিফল্টভাবে কন্টেন্টকে প্রদর্শিত অবস্থায় রাখার জন্য .in ক্লাস যুক্ত করতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Collapse Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h3>বেসিক কলাপ্সিবলের উদাহরণ</h3>
          <a href="#collapse" class="btn btn-info" data-toggle="collapse">বেসিক কলাপ্সিবল</a>
          <div id="collapse" class="collapse in">
            ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা
            বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন
            প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
          </div>
	    </div>

   </body>
</html>

ফলাফল

কলাপ্সিবল প্যানেল

নিচের উদাহরণে কিভাবে কলাপ্সিবল প্যানেল তৈরি করা যায় তা দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Collapse Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h2>কলাপ্সিবল প্যানেল</h2>
            <div class="panel-group">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse">কলাপ্সিবল প্যানেল</a>
                  </h4>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                  <div class="panel-body">প্যানেল বডি</div>
                  <div class="panel-footer">প্যানেল ফুটার</div>
                </div>
              </div>
            </div>
	    </div>

   </body>
</html>

ফলাফল

কলাপ্সিবল লিষ্ট গ্রুপ

নিচের উদাহরণে লিস্ট গ্রুপ সহ একটি কলাপ্সিবল প্যানেল তৈরি করা দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Collapse Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
            <h2>কলাপ্সিবল লিষ্ট গ্রুপ</h2>
            <div class="panel-group">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse">কলাপ্সিবল লিষ্ট গ্রুপ</a>
                  </h4>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                  </ul>
                  <div class="panel-footer">footer</div>
                </div>
              </div>
            </div>
	    </div>

   </body>
</html>

ফলাফল

একরডিওন

একরডিওন ১

ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।

একরডিওন ২

একরডিওন ৩

উপরে প্রদর্শিত উদাহরণে প্যানেল কম্পোনেন্টের মাধ্যমে একটি সহজ একরডিওন দেখানো হয়েছে।

নোটঃ কলাপ্সিবল আইটেমটি প্রদর্শিত হওয়ার সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করে দেওয়ার জন্য data-parent এট্রিবিউট ব্যবহার করতে হবে।

উদাহরণ: একরডিওন উদাহরন

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Collapse Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

   <body>

		<div class="container">
          <h2>একরডিওন উদাহরন</h2>
          <p>নোট: কলাপ্সিবল আইটেম দেখানোর সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করার জন্য
              <strong>data-parent</strong> এট্রিবিউট ব্যবহার করুনঃ</p>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#coll1">একরডিওন ১</a>
                </h4>
              </div>
              <div id="coll1" class="panel-collapse collapse in">
                <div class="panel-body">ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়;
                   যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা
                    অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে
                   এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।</div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#coll2">একরডিওন ২</a>
                </h4>
              </div>
              <div id="coll2" class="panel-collapse collapse">
                <div class="panel-body">ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়;
                   যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা
                    অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে
                   এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।</div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#coll3">একরডিওন ৩</a>
                </h4>
              </div>
              <div id="coll3" class="panel-collapse collapse">
                <div class="panel-body">ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়;
                   যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা
                    অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে
                   এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।</div>
              </div>
            </div>
          </div>
	    </div>

   </body>
</html>

ফলাফল

বুটস্ট্রাপ কলাপ্সের সম্পূর্ণ রেফারেন্স

বুটস্ট্রাপ কলাপ্স অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS কলাপ্স রেফারেন্স পেজে ভিজিট করুন।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

বুটস্ট্রাপ টিউটোরিয়াল

সিএসএস কম্পোনেন্ট

JS কম্পোনেন্ট

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ রেফারেন্স

বুটস্ট্রাপ কলাপ্স - Bootstrap Collapse

বুটস্ট্রাপ বেসিক কলাপ্সিবল

উদাহরণ

ফলাফল

উদাহরণের ব্যাখ্যা

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

কলাপ্সিবল প্যানেল

উদাহরণ

ফলাফল

কলাপ্সিবল লিষ্ট গ্রুপ

উদাহরণ

ফলাফল

একরডিওন

একরডিওন ১

একরডিওন ২

একরডিওন ৩

উদাহরণ: একরডিওন উদাহরন

ফলাফল

বুটস্ট্রাপ কলাপ্সের সম্পূর্ণ রেফারেন্স

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য