JSFiddle - React, Tailwind, and code Playground

by kneidels

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>
<div id="row1" class="ticketRow alert">
  <div class="btn-group actionButtons">
    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-default">Menu <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="javascript:;" data-ticketid="1" data-action="close">Task 1</a></li>
      <li class="divider"></li>
      <li><a href="javascript:;" data-ticketid="1" data-action="pending">Task 2</a></li>
      <li class="divider"></li>
      <li><a href="javascript:;" data-ticketid="1" data-action="forward">Task 3</a></li>

    </ul>
  </div>

  <div class="ticketMeta">Ticket Meta</div>

  <a class="btn" href="javascript:alert('hello');">text link</a>
</div>

CSS

.ticketRow {
  height: 200px;
  width: 100%;
  background: #eee;
  cursor: pointer;
}

.ticketMeta {
  background: #333;
  height: 100px;
  display: none;
}

JavaScript

$(".ticketRow").on("click", function(e) {
	  if(e.currentTarget.id == e.target.id){
 			 $(this).find(".ticketMeta").slideToggle();
		}
	});