JSFiddle - React, Tailwind, and code Playground

by Yosef H

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div ng-app="labelApp" ng-controller="labelCtrl">
    <label ng-click="toggle()" for="clicky">Click to toggle slide</label>
    <input onclick="alert('indirect click!');" id="clicky" type="checkbox" />
  <div id="myDiv">
    Clicking check box triggers sliding animation once. 
    <br>
    Clicking label triggers sliding animation twice.
  </div>
</div>

CSS

div.box {
  width: 50px;
  height: 50px;
  margin: 10px;
  background: blue;
}
div.box div {
  width: 25px;
  height: 25px;
  background: red;
}

JavaScript

angular.module("labelApp", [])
  .controller("labelCtrl", function($scope) {
    $scope.toggle = function() {
      $("#myDiv").slideToggle();
    }
  });