Use Twitter Bootstrap Dropdown toggle to trigger another dropdown toggle or div

Question

I need to make a dropdown toggle with some options, and when the user selects one of those options from dropdown, it either triggers another dropdown toggle to appear right underneath OR Call a Div and display some content.

I have looked at the BS documentation and they don't really go into the triggers or what's needed to call another div or dropdown to display.

Here's a link to jsfiddle on what I have.

I want the second dropdown to only appear when user selects "Option 1" from previous dropdown toggle.

<div class="question">
<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Select one                    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="opt1" >Option 1</a></li>
    <li><a href="#" id="opt2">Option 2</a></li>
    <li><a href="#" id="opt3">Option 3</a></li>
    <li><a href="#" id="opt3">Option 4</a></li>
  </ul>
</div>

<div class="question">
  <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Another One                    <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#" id="opt5" >Option 5</a></li>
        <li><a href="#" id="opt6">Option 6</a></li>
        <li><a href="#" id="opt7">Option 7</a></li>
        <li><a href="#" id="opt8">Option 8</a></li>
      </ul>
    </div>
</div>

Would really appreciate any help I can get.

L105 · Accepted Answer · 2013-09-08 03:37:26Z

1

You have multiple options to do it.

$('.question .visitor li:first-child a').click(function () { // First li of it's parent
            $('.opt1').fadeToggle();
        });

OR

$('.question .visitor li:eq(0) a').click(function () { // 0 is the first of all relevant elements criteria 
            $('.opt1').fadeToggle();
        });

OR

$('#opt1').click(function () { // Select by ID
            $('.opt1').fadeToggle();
        });

answered Sep 8, 2013 at 3:37

L105

5,4193 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SpacePope · Accepted Answer · 2013-09-08 03:40:15Z

0

First off, you'll need to detect a click event on the dropdown box in question, on an <li> if you want that to be the trigger. So:

$( "ul.dropdown-menu li" ).click(function() {

});

Now, whenever an <li> is clicked inside the dropdown-menu, that callback function will be called. Here, if you need another dropdown or a div to appear, use the appendChild() method to add those items where needed. Hope this helps!

answered Sep 8, 2013 at 3:40

SpacePope

1,4331 gold badge15 silver badges21 bronze badges

1 Comment

SpacePope Over a year ago

Perhaps I didn't understand, and you need each <li> cause a different item to appear. In this case, try: $("ul.dropdown-menu li:eq(0)").click(function() { // now you can control what happens when you click the first // dropdown element. Replace the 0` with 1 for the` // second, 2` for the third, etc` });

Collectives™ on Stack Overflow

Use Twitter Bootstrap Dropdown toggle to trigger another dropdown toggle or div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related