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>
    <textarea id="custom-event"></textarea>
    <button>Push</button>
  </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;
}

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

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

JavaScript

(function($) {

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

  $selectEvent.find("button").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var eventName = $selectEvent.find("select").val();
    console.log(e.type, eventName);

    if (eventName == "custom")
      console.log("custom event", $("#custom-event").val());

  });
  
  $selectEvent.find("select").on("change", function(e) {
  	var eventName = $selectEvent.find("select").val();
  	console.log(e.type, eventName);
    
    if (eventName == "custom") {
      console.log("custom event", $("#custom-event").val());
      $customEvent.toggle(eventName == "custom");
    }
  });

})(jQuery);