jQuery addClass example

Change class name on click in jQuery

by st3fan

HTML

<div id="webhooks-helper">
  <p>Hello World</p>
  
  <div id="select-event">
    <select>
      <option value="custom">Custom</option>
      <option value="event.created">event.created</option>
      <option value="category.created">category.created</option>
      <option value="booking.created">booking.created</option>
      <option value="booking.checkin">booking.checkin</option>
    </select>
    <div>
      <textarea id="custom-event"></textarea>
      <button>Push</button>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#webhooks-helper {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#custom-event {
  /*display: none;*/
  width: 100%;
  height: 100px;
}

#webhooks-helper.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#webhooks-helper.alt button {
  background: #fff;
  color: #000;
}

JavaScript

(function($) {

	$(function() {
    var $selectEvent = $("#select-event");
    var $customEvent = $("#custom-event");

    $selectEvent.find("button").on("click", function(e) {
      var eventName = $selectEvent.find("select").val();
      var data = (eventName == "custom") ? $("#custom-event").val() : "";
      
      console.log(e.type, eventName, data);
    });

    $selectEvent.find("select").on("change", function(e) {
      var eventName = $selectEvent.find("select").val();
      $customEvent.toggle(eventName == "custom");
    });
	});
})(jQuery);