title: Showing a div that displays drop-down content on list item click using javascript
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8" lang=""&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9" lang=""&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
  &lt;html class="no-js" lang=""&gt;
  &lt;!--&lt;![endif]--&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;
  
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
    &lt;style&gt;
      body {
        padding-top: 50px;
        padding-bottom: 20px;
      }
    &lt;/style&gt;
  
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!--[if lt IE 8]&gt;
              &lt;p class="browserupgrade"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
  
  
    &lt;!--MAIN CONTENT GOES HERE --&gt;
  
    &lt;style&gt;
      /* main menu */
      .mainNav {
        margin: 0;
        padding: 0;
        min-height: 100px;
        text-align: left;
        white-space: normal;
        width: 368px;
        display: block;
        cursor: default;
      }
      .mainNav-item {
        display: inline-block;
        vertical-align: top;
      }
      .mainNav-item a {
        text-decoration: none;
        color: black;
      }
      .mainNav-item a:hover {
        text-decoration: none;
        color: black;
      }
      .mainNav-item-tile {
        display: block;
        margin: 6px 5px 6px 5px;
        padding: 0;
        text-align: center;
        line-height: normal;
        position: relative;
        text-decoration: none;
        width: 110px;
        height: 110px;
        background: transparent;
        border-width: 0;
        font-size: 14px;
        outline-color: #e7e7e7;
        background-color: #e7e7e7;
      }
      .mainNav-item-tile:hover {
        outline-color: #ccc;
        background-color: #ccc;
      }
      .mainNav-item-tile-img {
        display: block;
        padding: 15px;
        margin-left: auto;
        margin-right: auto;
      }
      .popover {
        max-width: 600px;
        width: auto;
      }
      /* The container &lt;div&gt; - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: inline-block;
      }
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        left: 80px;
        top: 20px;
      }
      /* Links inside the dropdown */
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {
        background-color: #f1f1f1
      }
    &lt;/style&gt;
  
  
  
    &lt;div style="float: left; cursor: pointer; margin: 13px 15px 0 0"&gt;
      &lt;img data-toggle="popover" data-placement="bottom" onmouseover="this.src='http://placehold.it/32x32'" onmousedown="this.src='http://placehold.it/32x32'" onmouseout="this.src='http://placehold.it/32x32'" src="http://placehold.it/32x32" /&gt;
  
      &lt;div id="popover_content_wrapper" style="display: none;"&gt;
        &lt;div&gt;
          &lt;ul class="mainNav"&gt;
            &lt;li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom"&gt;
              &lt;a ID="navItem" runat="server" class="mainNav-item-tile"&gt;
                &lt;img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" /&gt;
                &lt;span&gt;MainMenuItem1&lt;/span&gt;
              &lt;/a&gt;
  
              &lt;div id='content1' class='dropdown-content'&gt;
                &lt;a href='#'&gt;SubMenuItem1&lt;/a&gt;
                &lt;a href='#'&gt;SubMenuItem2&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom"&gt;
              &lt;a ID="navItem" runat="server" class="mainNav-item-tile"&gt;
                &lt;img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" /&gt;
                &lt;span&gt;MainMenuItem2&lt;/span&gt;
              &lt;/a&gt;
  
              &lt;div id='content2' class='dropdown-content'&gt;
                &lt;a href='#'&gt;SubMenuItem1&lt;/a&gt;
                &lt;a href='#'&gt;SubMenuItem2&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom"&gt;
              &lt;a ID="navItem" runat="server" class="mainNav-item-tile"&gt;
                &lt;img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" /&gt;
                &lt;span&gt;MainMenuItem3&lt;/span&gt;
              &lt;/a&gt;
  
              &lt;div id='content3' class='dropdown-content'&gt;
                &lt;a href='#'&gt;SubMenuItem1&lt;/a&gt;
                &lt;a href='#'&gt;SubMenuItem2&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom"&gt;
              &lt;a ID="navItem" runat="server" class="mainNav-item-tile"&gt;
                &lt;img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" /&gt;
                &lt;span&gt;MainMenuItem4&lt;/span&gt;
              &lt;/a&gt;
  
              &lt;div id='content4' class='dropdown-content'&gt;
                &lt;a href='#'&gt;SubMenuItem1&lt;/a&gt;
                &lt;a href='#'&gt;SubMenuItem2&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="mainNav-item dropdown" data-toggle="popover" data-placement="bottom"&gt;
              &lt;a ID="navItem" runat="server" class="mainNav-item-tile"&gt;
                &lt;img width="64" height="64" src="http://placehold.it/64x64" class="mainNav-item-tile-img" /&gt;
                &lt;span&gt;MainMenuItem5&lt;/span&gt;
              &lt;/a&gt;
  
              &lt;div id='content5' class='dropdown-content'&gt;
                &lt;a href='#'&gt;SubMenuItem1&lt;/a&gt;
                &lt;a href='#'&gt;SubMenuItem2&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
    &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $('[data-toggle="popover"]').popover({
          html: true,
          content: function() {
            return $('#popover_content_wrapper').html();
          }
        });
  
        $('html').on('click', function(e) {
          $('[data-toggle="popover"]').each(function() {
            //the 'is' for buttons that trigger popups
            //the 'has' for icons within a button that triggers a popup
            if (!$(this).is(e.target) &amp;&amp; $(this).has(e.target).length === 0 &amp;&amp; $('.popover').has(e.target).length === 0) {
              $(this).popover('hide');
            }
          });
        });
  
  
        $(".dropdown").click(function(e) {
          e.preventDefault();
          var $this = $(this).children(".dropdown-content");
          $(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
          $this.slideToggle(200); //Open the new submenu
        });
      });
    &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My goal here is to show the drop-down content when one of the li items is clicked. I am using this <a href="http://www.w3schools.com/css/css_dropdowns.asp" rel="nofollow">example on w3schools</a> as a basis. The only problem with this example is that it displays the dropdown-content on hover. </p>
  
  <p>Now I am trying to figure out how to make the dropdown-content div show when an li item with the class of 'dropdown' is clicked rather than using the hover pseudo class.</p>