How to create dropdown inside dropdown using bootstrap

Question

I want to create a drop-down, But I am not sure it is a drop-down or something else coz I am new to HTML environment.

What I want to create is

When I clicked on the Indian Spices, It must show another dropdown inside it, and if I clicked on the Pepper in must show another two items under it.

Here each option should comes under it is parent.And drop-down must not have the borders around it .I need to design the drop-down as same as in the image .(Without any borders)

I have tried something here but I know it is not the proper way of design. https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html

Here I almost near to my goal

https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html

Can anyone guide me to solve this ...

Possible duplicate of [Twitter Bootstrap Multilevel Dropdown Menu](https://stackoverflow.com/questions/9758587/twitter-bootstrap-multilevel-dropdown-menu) — DragonBorn, Apr 27 '18 at 05:01
@DragonBorn I already referred that and that's not solved my issue . — Nikson, Apr 27 '18 at 05:03
Cant you go with [this](https://valor-software.com/ngx-bootstrap/#/dropdowns#nested-dropdowns) — Anuradha Gunasekara, Apr 27 '18 at 05:34

DragonBorn · Accepted Answer · 2018-04-27T06:27:11.110

2

I think this is what you were looking for. You can do the rest bit of the designing yourself. Check the snippet.

$(document).ready(function () {
  $('#head__top').on('click', function(){
    if($('#innerCollapse').is(':visible')) {
      $('#innerCollapse').hide();
    }
  });
  $('#head__sub').on('click', function() {
     $('#innerCollapse').fadeToggle(300);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-12">
  <h4 id="head__top">
    <a class="font-weight-normal badge badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Indian Spices</a>
    <span class="col-sm-3"></span>
    <span class="col-sm-3"></span>
    <i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="font-size:18px"></i>
  </h4>
  <div class="collapse" id="collapseExample">
    <h6 id="head__sub">
    <a class="dropdown-item" role="button" aria-expanded="false"
   aria-controls="innerCollapse">Pepper
    <span class="col-sm-3"></span>
    <span class="col-sm-3"></span>

    <i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"
   aria-controls="innerCollapse" style="font-size:18px"></i></a>
     </h6>

  </div>

  <div class="collapse col-sm-3" id="innerCollapse">
    <h6>
      <a class="dropdown-item">Black Pepper</a>
      <a class="dropdown-item">White Pepper</a>
    </h6>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

edited Apr 27 '18 at 06:27

answered Apr 27 '18 at 05:34

DragonBorn

1,809
5
20
44

clicked on pepper it is not showing the other two options – Nikson Apr 27 '18 at 05:40
@Nikson Click on the down arrow next to pepper. It will show the other two options. – DragonBorn Apr 27 '18 at 05:40
If you don't mind can you please keep the down arrow in same order (match with parent) – Nikson Apr 27 '18 at 05:42
If I closed the Indian Spices without closing of Pepper it shows the 2 options inside the pepper under the indian spices ,How to fix it @DragonBorn – Nikson Apr 27 '18 at 05:53
Looking for your response @DragonBorn – Nikson Apr 27 '18 at 06:03
Wait I am bit busy. I will work on it after some time. – DragonBorn Apr 27 '18 at 06:08
Check now if it works for you. And use your idea a little bit to match the code according to your requirements. – DragonBorn Apr 27 '18 at 06:27
it is working fine except the closing concept ,please refer this https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html – Nikson Apr 27 '18 at 07:00
I have added the script function in the index.html file but it is not working for me please give me a guidance in this – Nikson Apr 27 '18 at 07:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169919/discussion-between-dragonborn-and-nikson). – DragonBorn Apr 27 '18 at 07:34

How to create dropdown inside dropdown using bootstrap

1 Answers1

Linked