Making bootstrap dropdown list push content down

erkberk 0
Viewed 32

Im quite new to coding and ive been trying to use dropdown list through bootstrap for a project im doing. I have tried many different approaches of getting the ul to push the content down so i can see the "Dropdown 2" while i have "Dropdown 1" open.

Any ideas on how to do this? :)

https://jsfiddle.net/tuqdw0ka/

<div class="dropdown-mobile-menu">
  <button class="show" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span>Dropdown 1</span>
  </button>
  <div class="dropdown-list-items">
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">something 1</a></li>
      <li><a class="dropdown-item" href="#">something 2</a></li>
      <li><a class="dropdown-item" href="#">something 3</a></li>
    </ul>
  </div>
  <button class="show" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span>Dropdown 2</span>
  </button>
  <div class="dropdown-list-items">
    <ul class="dropdown-menu dropdown-theme">
      <li><a class="dropdown-item" href="#">else 1</a></li>
      <li><a class="dropdown-item" href="#">else 2</a></li>
      <li><a class="dropdown-item" href="#">else 3</a></li>
    </ul>
  </div>
</div>
dropdown css html
1 Answers

As i suggested, you can also use bootstrap accordion and style it as you wish.

More Features:

  • You can also do it like if you open first and then open second, first accordion body will remain open and will not close.

  • you can also achieve this like if you click on first one, the second one will open also.

There are lots of other features too, Just make sure you go through this bootstrap Documentation about accordion.

Bootstrap Accordion Documentation

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<ul class="accordion accordion-flush list-unstyled" id="accordionFlushExample">
  <li class="accordion-item border-bottom-0">
    <h2 class="accordion-header" id="flush-headingOne">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Dropdown 1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">

      <ul class="accordion-body list-unstyled">
        <li><a class="dropdown-item" href="#">something 1</a></li>
        <li><a class="dropdown-item" href="#">something 2</a></li>
        <li><a class="dropdown-item" href="#">something 3</a></li>
      </ul>
    </div>
  </li>
  <li class="accordion-item border-bottom-0">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Dropdown 2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <ul class="accordion-body list-unstyled">
        <li><a class="dropdown-item" href="#">else 1</a></li>
        <li><a class="dropdown-item" href="#">else 2</a></li>
        <li><a class="dropdown-item" href="#">else 3</a></li>
      </ul>
    </div>
  </li>
</ul>

DnD2k210
Related