Conditionally Show or Hide Secondary Twitter-Bootstrap Drop-Menu Depending on Master Drop-Menu Selection

I am very familiar with conditionally hiding or displaying elements when using Angular. I am less familiar with doing so with straight HTML and JS. I have an HTML page that makes use of twitter-bootstrap 3.4.0. With this HTML page I initially want to display one master drop-menu. Then, depending on what selection a user makes, I want to conditionally display one of several secondary drop-menus. This is my master drop-menu HTML:

<div class="dropdown">
  <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
    onclick="loadCategoryList()">
    Select Job Category
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="selectCategory"></ul>
</div>

And here's the JS being referenced:

let selectCat = document.getElementById("selectCategory");

// Load category list into drop-menu
async function loadCategoryList() {
  const categoryArr = ["option 1", "option 2", "option 3", "emailer"];
  while (selectCat.firstChild) {
    selectCat.removeChild(selectCat.firstChild);
  }
  for (let i = 0; i < categoryArr.length; i++) {
    let opt = categoryArr[i];
    let a = document.createElement("a");
    a.textContent = opt;
    a.setAttribute('href', '#');
    a.setAttribute('class', 'btn btn-link');
    let li = document.createElement("li");
    li.appendChild(a);
    selectCat.appendChild(li);
  }
}

Then I have a secondary drop-menu div node that looks like this:

<div class="dropdown">
  <button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
    onclick="loadEmailersList()">
    Select Email Type
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="selectEmailer"></ul>
</div>

The change I want to make is I that I only want to display this secondary "emailer" div node if the selection from the master category list drop-menu was "emailer". In other words, the "emailer" drop-menu node should be hidden, and only become visible if and when the selection from the master category-list drop-menu is equal to "emailer".

I'm unclear how much of this happens in the HTML vs in the JS. How do I accomplish this using HTML, JS and Bootstrap?

Answer

November 25, 2019

KyleMit

To modify the visibility of an element, you can use jQuery's .hide(), .show(), or .toggle()

You'll also have determine which item was clicked in a dropdown menu

To start off hidden, you could use something like style="display: none;"

Together, it should look a little something like this:

// handle click event on dropdown menu item
$('#category .dropdown-menu').on('click', 'li a', function(e) {
  
  // determine which item was selected
  var selText = $(this).text();
  
  // determine whether email box should be visible
  var showEmail = selText === "Email"

  // show/hide visibility
  $('#box').toggle(showEmail);
});

#category, #box {
  margin: 10px;
}
#box {
    width: 200px;
    height: 100px;
    background: cornflowerblue;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="dropdown" id="category">
  <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" 
          type="button" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true">
    Pick Category
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Email</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

<div id="box" style="display: none;"> Email </div>