JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

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/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-3">
    <a href="#" data-toggle="modal" data-target="#modalAccountManagerEarningsView" data-startid="" data-endid="" data-contextid="LATEST" id="anchor_Org_AccountManagerEarningsLatest">
      <div class="tile green" id="div_Org_latest" data-contextid="hello 1">
        <img src="~/Images/loading_bar.gif" />
        <p>Latest</p>
        <!--{contextid="LATEST"}-->
      </div>
      <input type="hidden" id="hiddenPreviousStart" />
      <input type="hidden" id="hiddenPreviousEnd" />
      <input type="hidden" id="hiddenPreviousContext" value="PREVIOUS" />
    </a>
  </div>
  <div class="col-sm-3">
    <a href="#" data-toggle="modal" data-target="#modalAccountManagerEarningsView" data-startid="" data-endid="" id="anchor_Org_AccountManagerEarningsPrevious">
      <div class="tile red" id="div_Org_Previous" data-contextid="hello 2">
        <img src="~/Images/loading_bar.gif" />
        <p>Previous</p>
        <!--{contextid="PREVIOUS"}-->
      </div>
    </a>
  </div>
  <div class="col-sm-3">
    <a href="#" data-toggle="modal" data-target="#modalAccountManagerEarningsView" data-startid="" data-endid="" data-contextid="MONTH" id="anchor_Org_AccountManagerEarningsMonth">
      <div class="tile orange" id="div_Org_Month">
        <img src="~/Images/loading_bar.gif" />
        <p>Month</p>
      </div>
    </a>
  </div>
  <div class="col-sm-3">
    <a href="#" data-toggle="modal" data-target="#modalAccountManagerEarningsView" data-startid="" data-endid="" data-contextid="FY" id="anchor_Org_AccountManagerEarningsFY">
      <div class="tile purple" id="div_Org_FY">
        <img src="~/Images/loading_bar.gif" />
        <p>Financial...

JavaScript

$(document).ready(function() {
  //$('.tile').click(function() {
    //var title = $this.id;
    //alert(title);
   // var myElement = $(this).data("contextid");
    //alert(myElement);
    //$('#selectedEarningsPeriod').val('hellox');
   // $('.collapse').collapse('toggle');
 // });
  
  $('a').click(function() {
    //var title = $this.id;
    //alert(title);
    
    alert($(this).attr("id"));
		$('.collapse').collapse('toggle');
  });

  $('#btnCheckCollapseCheck').click(function() {
    var isVisible = $('#collapseExample').is(":visible");
    var isHidden = $('#collapseExample').is(":hidden");
    alert('Active ' + isVisible);
  });

  $('.collapse').on('show.bs.collapse', function() {
    var valx = $('#selectedEarningsPeriod').val();
    //alert(valx);
    //var ox = $(this).data("contextid");
    //alert(ox);
    $('#panelHeader').html(valx);
  })
});