JSFiddle - React, Tailwind, and code Playground

by Malin Jayakody

HTML

<div class="container">
   <ul class="ilmcon-gantt-task-type-list">
      <li class="selected" data-value="0">
         <div class="title">Title</div>
         <div class="description">Description</div>
      </li>
      <li data-value="1">
         <div class="title">Title</div>
         <div class="description">Description</div>
      </li>
      <li data-value="2">
         <div class="title">Title</div>
         <div class="description">Description</div>
      </li>
      <li data-value="3">
         <div class="title">Title</div>
         <div class="description">Description asgjag das d sf jsf h sf fhasf has fasfhf hsaf hs ah sfh fh asf</div>
      </li>
   </ul>
</div>

CSS

.container {
   padding: 20px;
   position: relative;
   width: 600px;
   height: 400px;
   background: #fff;
   font-family: Arial, sans-serif;
   font-size: 14px;
   line-height: 1.42857142857143;
}

.ilmcon-gantt-task-type-list {
   list-style: none;
   margin: 0;
   padding: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   clear: both;
}

.ilmcon-gantt-task-type-list li {
   margin: 0;
   padding: 10px;
   border: 1px solid #fff;
   float: left;
   cursor: pointer;
   height: 80px;
   width: 50%;
   overflow: hidden;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.ilmcon-gantt-task-type-list li.selected {
   background-color: #E6EFF8;
   border-radius: 3px;
}

.ilmcon-gantt-task-type-list li .title {
   font-weight: bold;
}

JavaScript

;
'use strict';
(function($) {

   var pluginName = 'listSelect',
      defaults = {};

   function Constructor(element, options) {
      this.options = $.extend({}, defaults, options);
      this.element = element;
      this._defaults = defaults;
      element.on('click', 'li', function(e) {
         e.preventDefault();
         e.stopPropagation();
         element.find('li').removeClass('selected');
         $(this).addClass('selected');
         var event = $.Event('change');
         event.value = $(this).data('value');
         element.trigger(event);
      });
   }

   $.fn[pluginName] = function(options) {
      var method = String(options);
      var lists = this.filter('ul');
      if (lists && lists.length > 0 && lists.first().data("plugin_" + pluginName) && /^val$/.test(method)) {
         return $(this).first().data("plugin_" + pluginName).element.find('li').filter('.selected').data('value');
      }

      lists.each(function() {
         var element = $(this);
         if (element && element.length > 0 && !element.data("plugin_" + pluginName)) {
            element.data("plugin_" + pluginName, new Constructor(element, options));
         }
      });
      return this;
   };
}(jQuery));


jQuery(function() {
   $('ul').listSelect();
   console.log($('ul').listSelect('val'));
});