منوی آکاردئونی در بوت استرپ

منوهای مخفی شونده

برخی اوقات می خواهیم قسمت بزرگی از یک صفحه را مخفی کنیم و آن را تنها در صورت نیاز کاربر نمایش دهیم. یکی از واضح ترین مثال ها در این زمینه، سوالات FAQ یا همان «سوالات متداول» است؛ در اکثر وب سایت ها این قسمت به صورت مخفی است و فقط سوال ها به کاربر نمایش داده می شود تا زمانی که روی سوال کلیک شود و پاسخ نیز ظاهر شود. در این مقاله به بررسی چند نوع از این منوها میپردازیم که یکی از آن ها منوهای آکاردئونی هستند.

ابتدا با یک دکمه و حالت ساده شروع می کنیم:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

کلاس collapse. به هر عنصری داده شود، آن عنصر قابلیت مخفی سازی پیدا میکند (در مثال بالا همان عنصر <div>). این همان محتوایی است که با کلیک مخفی شده و یا نمایش داده می شود. برای کنترل کردن عنصر مخفی ساز از "data-toggle="collapse برای تگ <a> یا یک دکمه استفاده کنید و سپس "data-target="#id را برای متصل کردن دکمه به محتوای مخفی شده می نویسیم.

برای عناصر <a> می توانید به جای استفاده از data-target از href استفاده کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: از آن جا که کار این منو ها مخفی کردن محتوا است، حالت پیش فرض نیز مخفی بودن محتوا است اما می توانید با اضافه کردن کلاس show. حالت پیش فرض را روی نمایش محتوا قرار دهید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Show Collapsible Content By Default</h2>
  <p>Add the show class next to the collapse class to show the content by default.</p>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse show">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
    
</body>
</html>

مشاهده ی خروجی در JSBin

ممکن است شکل برخی از آن ها با برخی دیگر فرق کند، اما این منوها از پرمصرف ترین و رایج ترین منوهای دنیای وب هستند، مخصوصا در زمینه ی مخفی سازی محتوا برای کاربر.

در مثال زیر می خواهیم ساده ترین منوی آکاردئونی در بوت استرپ را بسازیم. ابتدا از attribute ای به نام data-parent استفاده می کنیم تا زمانی که یکی از عناصر مخفی شونده در حال نمایش است، دیگر عناصر مخفی شونده در عنصر مادرشان مخفی شوند:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>

مشاهده ی خروجی در JSBin

افکت سازی کلاس collapsing

اولین نکته استفاده از کلاس collapsing. است. این کلاس زمانی که منو در حال بسته شدن باشد یک افکت به آن اضافه می کند و زمانی که بسته شد این افکت را حذف می کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  .collapsing {
    background-color: yellow;
  }
</style>
</head>
<body>

<div class="container">
  <h2>Collapsing</h2>
  <button type="button" class="btn btn-primary collapsed" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    The .collapsing class is added when the transition starts, and removed when it is finished. In this example, the collapsible content gets a yellow background for those seconds it takes to show the content. The background color is removed when the transition has ended.
  </div>
</div>
    
</body>
</html>

مشاهده ی خروجی در JSBin

این افکت باعث می شود هنگامی که چندین و چند منوی مخفی ساز داریم کاربر بین آن ها گیج نشود و دقیقا مشخص شود کدام منو در حال باز شدن است.

استفاده از جاوا اسکریپت

شما می توانید به جای کار با کلاس ها به صورت دستی از جاوا اسکریپت برای مخفی سازی عناصر استفاده کنید. برای این کار کد شما باید پیرو ساختار زیر باشد:

$('.collapse').collapse()

در مثال زیر سه نوع دکمه را قرار دادیم که هر سه باعث مخفی شدن محتوا می شوند؛ یکی کار نمایش (show) دیگری کار مخفی سازی (hide) و آخرین دکمه نیز کار هر دو را انجام می دهد:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Collapsible Methods</h2>
  <p>The toggle method toggles the collapsible content.</p>
  <p>The show method shows the collapsible content.</p>
  <p>The hide method hides the collapsible content.</p>
  <button type="button" class="btn btn-primary">Toggle</button>
  <button type="button" class="btn btn-success">Show</button>
  <button type="button" class="btn btn-warning">Hide</button> 
   
  <div class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<script>
$(document).ready(function(){
  $(".btn-primary").click(function(){
    $(".collapse").collapse('toggle');
  });
  $(".btn-success").click(function(){
    $(".collapse").collapse('show');
  });
  $(".btn-warning").click(function(){
    $(".collapse").collapse('hide');
  });
});
</script>

</body>
</html>

مشاهده ی خروجی در JSBin