JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills left">
  <li class="dropdown active">
    <a class="dropdown-toggle" id="inp_impact" data-toggle="dropdown">
      <i class="icon icon-envelope icon-white"></i>&nbsp;<span id="dropdown_title">Select</span><span class="caret"></span></a>
    <ul ID="divNewNotifications" class="dropdown-menu">
      <li><a>One</a></li> 
      <li><a>Two</a></li>       
      <li><a>Three</a></li>                         
    </ul>
  </li>
</ul>
<div id="one"><h1>One</h1></div>
<div id="two" style="display:none;"><h1>Two</h1></div> 
<div id="three" style="display:none;"><h1>Three</h1></div>

JavaScript

$('.dropdown-toggle').dropdown();
$('#divNewNotifications li').on('click', function() {
  $('#dropdown_title').html($(this).find('a').html());
  var title =$('#dropdown_title').html();
  if (title=="One") {
    $("#one").show();
    $("#two").hide();
    $("#three").hide();
  }
  if (title=="Two") {
    $("#one").hide();
    $("#two").show();
    $("#three").hide();
  } 
  if (title=="Three") {
    $("#one").hide();
    $("#two").hide();
    $("#three").show();
  }
});