0

I need to have multilevel drop down but not like this multilevel dropdown. I want to open a multilevel dropdown in the same panel. So I've created a dropdown based on accordion collapse. but as per the collapse panel default property when a panel collapse rest of other goes up or down base on the space available.

I want when click on any option of the dropdown it willvisible on the same place see the code sample

.multi_level_select {
  box-shadow: 0px 0px 11px 0px rgba(155, 155, 155, 0.5);
  border-radius: 6px;
  margin: 2em;
}

.multi_select {
  padding: 0.5em 1em;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.multi_select_options {
  max-height: 13em;
  overflow: auto;
}

.multi_select_options label {
  margin-bottom: 0;
}

.multi_select_options .option,
.multi_select_options .main_option,
.multi_options .options {
  padding: 0.5em 1em;
}

.multi_select_options .option:hover,
.multi_select_options .main_option:hover {
  background-color: #1e90ff;
}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link href="./assets/css/custom_scroll.css" rel="stylesheet" />
    <title>HTML</title>
  </head>

  <body>

    <section>
      <select class="main_multi_select">
        <option value="">Select an option</option>
      </select>

      <div class="multi_level_select">
        <div class="multi_select">
          Select an option
        </div>
        <div class="multi_select_options" id="multi_select_options">
          <div class="multi_options" id="level_1">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="level1" href="#level1"> Level 1 </label>
            <div class="options collapse" id="level1" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 1.1 </label>
              <label class="option d-flex"> Option 1.2 </label>
              <label class="option d-flex"> Option 1.3 </label>
              <label class="option d-flex"> Option 1.4 </label>
              <label class="option d-flex"> Option 1.5 </label>
              <label class="option d-flex"> Option 1.6 </label>
              <label class="option d-flex"> Option 1.7 </label>
              <label class="option d-flex"> Option 1.8 </label>
              <label class="option d-flex"> Option 1.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_2">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level2" href="#level2"> Level 2 </label>
            <div class="options collapse" id="level2" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 2.1 </label>
              <label class="option d-flex"> Option 2.2 </label>
              <label class="option d-flex"> Option 2.3 </label>
              <label class="option d-flex"> Option 2.4 </label>
              <label class="option d-flex"> Option 2.5 </label>
              <label class="option d-flex"> Option 2.6 </label>
              <label class="option d-flex"> Option 2.7 </label>
              <label class="option d-flex"> Option 2.8 </label>
              <label class="option d-flex"> Option 2.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_3">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level3" href="#level3"> Level 3 </label>
            <div class="options collapse" id="level3" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 3.1 </label>
              <label class="option d-flex"> Option 3.2 </label>
              <label class="option d-flex"> Option 3.3 </label>
              <label class="option d-flex"> Option 3.4 </label>
              <label class="option d-flex"> Option 3.5 </label>
              <label class="option d-flex"> Option 3.6 </label>
              <label class="option d-flex"> Option 3.7 </label>
              <label class="option d-flex"> Option 3.8 </label>
              <label class="option d-flex"> Option 3.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_4">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level4" href="#level4"> Level 4 </label>
            <div class="options collapse" id="level4" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 4.1 </label>
              <label class="option d-flex"> Option 4.2 </label>
              <label class="option d-flex"> Option 4.3 </label>
              <label class="option d-flex"> Option 4.4 </label>
              <label class="option d-flex"> Option 4.5 </label>
              <label class="option d-flex"> Option 4.6 </label>
              <label class="option d-flex"> Option 4.7 </label>
              <label class="option d-flex"> Option 4.8 </label>
              <label class="option d-flex"> Option 4.9 </label>
            </div>
          </div>
          <label class="option d-flex"> Option 5 </label>
          <label class="option d-flex"> Option 6 </label>
          <label class="option d-flex"> Option 7 </label>
          <div class="multi_options" id="level_8">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level8" href="#level8"> Level 8 </label>
            <div class="options collapse" id="level8" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 8.1 </label>
              <label class="option d-flex"> Option 8.2 </label>
              <label class="option d-flex"> Option 8.3 </label>
              <label class="option d-flex"> Option 8.4 </label>
              <label class="option d-flex"> Option 8.5 </label>
              <label class="option d-flex"> Option 8.6 </label>
              <label class="option d-flex"> Option 8.7 </label>
              <label class="option d-flex"> Option 8.8 </label>
              <label class="option d-flex"> Option 8.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_9">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level9" href="#level9"> Level 9 </label>
            <div class="options collapse" id="level9" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 9.1 </label>
              <label class="option d-flex"> Option 9.2 </label>
              <label class="option d-flex"> Option 9.3 </label>
              <label class="option d-flex"> Option 9.4 </label>
              <label class="option d-flex"> Option 9.5 </label>
              <label class="option d-flex"> Option 9.6 </label>
              <label class="option d-flex"> Option 9.7 </label>
              <label class="option d-flex"> Option 9.8 </label>
              <label class="option d-flex"> Option 9.9 </label>
            </div>
          </div>
          <div class="multi_options" id="level_10">
            <label class="main_option d-flex collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="level10" href="#level10"> Level 10 </label>
            <div class="options collapse" id="level10" data-parent="#multi_select_options">
              <label class="option d-flex"> Option 10.1 </label>
              <label class="option d-flex"> Option 10.2 </label>
              <label class="option d-flex"> Option 10.3 </label>
              <label class="option d-flex"> Option 10.4 </label>
              <label class="option d-flex"> Option 10.5 </label>
              <label class="option d-flex"> Option 10.6 </label>
              <label class="option d-flex"> Option 10.7 </label>
              <label class="option d-flex"> Option 10.8 </label>
              <label class="option d-flex"> Option 10.9 </label>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

    <script src="./assets/js/custom_scroll.js"></script>
  </body>
</html>

when I click on the "level 1" it will open its sub component. now I want to open another level lets say "level 4" so I scroll down and and put the level on the last(fifth) position of opened panel (showing five element at a time). When I click notice that "Level 4" scroll to top and not visible. it should not scroll to above it should open at position 4 in the visible dropdown.

Community
  • 1
  • 1
Sumit Sharma
  • 31
  • 4
  • Please refer this solution https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation , Hope this help :) – Pratiksha Kale Mar 17 '20 at 05:27
  • I've already checked this solution but this will open next level dropdown outside of the main dropdown in desktop view and in mobile view its open inside the dropdown. That is the default behaviour of the basic multi level dropdown. For my case both view should be same. Please refer my code snippet. – Sumit Sharma Mar 17 '20 at 07:11

0 Answers0