JSFiddle - React, Tailwind, and code Playground

Dash Drop Down Edit title

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<nav class="nav navbar-primary">
  <div class="container-fluid">
    <div class="navbar-brand">
      <i class="fa fa-cube"></i>&nbsp; [APP Name]
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#"><i class="fa fa-info-circle"></i>
          <span class="hidden-sm hidden-xs">&nbsp;About</span></a>
      </li>
      <li id="DASHBOARD" class="navbar-nav-dash dropdown ybx-home ybx-previous active">
        <a data-toggle="dropdown" href="return false;" class="dropdown-toggle" aria-expanded="true">
          <i class="fa fa-dashboard" title="Access the dashboards for this app"></i>
          <span class="hidden-sm hidden-xs">&nbsp;Dashboards</span>
          <span class="caret"></span>
        </a>
        <div class="dropdown-menu HingeUpToDown">
          <div class="media-list">
            <div class="media">
              <div class="media-left">
                <button href="#stay" class="btn btn-link" title="Set as My App Landing Page">
                  <i class="fa fa-heart"></i>
                </button>
              </div>
              <div class="media-body">
                <a href="#stay">
          ...

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,300);
  @import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);
  * {
    font-family: 'Open Sans';
    color: gray;
  }
  
  .btn-autosave {
    /* The switch - the box around the slider */
    /* Hide default HTML checkbox */
    /* The slider */
    /* Rounded sliders */
  }
  
  .btn-autosave .btn-primary,
  .btn-link.btn-primary .fa,
  .btn-primary .visible-lg-inline {
    color: gray;
  }
  
  .btn-autosave *,
  .btn-autosave .btn:hover {
    text-decoration: none;
  }
  
  .btn-autosave button {
    background-color: transparent;
  }
  
  .btn-autosave nav {
    padding-top: 5px;
  }
  
  .btn-autosave .tooltip {
    white-space: no-wrap;
    width: 200px;
  }
  
  .btn-autosave .media-controls {
    margin-left: 20%;
  }
  
  .btn-autosave .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 17px;
    vertical-align: text-top;
    margin-bottom: 0;
    margin-top: 4px;
  }
  
  .btn-autosave .switch input {
    display: none;
  }
  
  .btn-autosave .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .btn-autosave .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .btn-autosave input:checked + .slider,
  .badge,
  .btn-block {
    background-color: #2196F3;
  }
  
  .btn-autosave input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  .btn-autosave input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
  }
  
  .btn-autosave .slider.round {
    border-radius: 17px;
  }
  
  .btn-autosave .slider.round:before {
    border-radius: 50%;
  }
  
  h3,
 ...

JavaScript

$(document).on('click', '#DASHBOARD .dropdown-menu', function (e) {
  e.stopPropagation();
});

$('.media-left .fa-heart').on('click', function (e) {
       
    if ( $(this).hasClass('red')) {
      $(this).removeClass('red');
    }
      else
    {
     	$(this).closest('.media-list').find('.fa-heart').removeClass('red');
      $(this).addClass('red');
    
    }
     
});

$(button).tooltip();