jQuery toggleClass example

Toggle class name on click in jQuery

by Bill Morris

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  />
  
<div id="seltrade" class="webdev">
  <ul id="hascoapp" name="hascoapp" class="hascoapp" criteria=1>
    <li value="">- Coapp?</li>
    <li value="1">Has Coapp</li>
    <li value="-1">No Coapp</li>
  </ul>

  <ul id="printable" name="printable" class="printable" criteria=0>
    <li value="">- Printable?</li>
    <li value="1">Printable</li>
    <li value="-1">NOT Printable</li>
  </ul>
</div>

CSS

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

* {
  margin: 0;
  padding: 0;
	font-family: 'tahoma ms', arial, sans-serif;
	font-size: 14px;
}
div.webdev {
  position: relative;
  display: inline-block;
  padding: 1rem;
}

.rs-container.hascoapp, .rs-container.printable {
	position: relative;
	list-style-type: none;
	margin: -0.4rem 1rem 0 0;
	padding: 0.3rem;
	height: 1rem;
	overflow: hidden;
	cursor: default;
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid gray;
	border-radius: 0.3rem;
	display: inline-block;
	width: 100px;
}

JavaScript

(function ($, window, document, undefined) {
	"use strict";

	var pluginName = "roller_selection",
		defaults = {
			include_animate_css: true,
			title: "Click to change value",
			classname: "",
			type: 'hidden',
			onclick: function(){}
		},
		pointer = 1,
		num_items = 0,
		element_id = '';

	// The actual plugin constructor
	function Plugin(element, options) {
		this.element = element;
		this.items = [];
		this.receiver = {};
		this.settings = $.extend({}, defaults, options);
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	$.extend(Plugin.prototype, {
		init: function () {
			let _this = this;
			num_items = $("li", $(this.element)).length;
			$("li", $(this.element)).each(function () {
				_this.items.push($(this).attr("value"));
			});
			this.stylesheet_handler();
			this.build_roller();
			this.insert_hidden();
			this.click_handler();
		},
		// --------------------------------------------------------------------------------
		click_handler: function () {
			let _this = this;
			$(this.element).on("click", function () {
				pointer++;
				if (pointer > num_items) {
					pointer = 1;
				}
				let items = _this.items;
				$("li.animate__fadeInUp", this.element).removeClass("animate__fadeInUp").addClass("animate__fadeOutUp");
				let sel = `li[value="${items[pointer - 1]}"]`;
				$(sel, this.element).removeClass("animate__fadeOutUp").show().addClass("animate__fadeInUp");
				$(`#${_this.element_id}`).val(items[pointer-1]);
				$(_this.receiver).val(items[pointer-1]);
				_this.settings.onclick(items[pointer-1]);
			});
		},
		// --------------------------------------------------------------------------------
		build_roller: function () {
			$(this.element).addClass("rs-container");
			$("li", $(this.element)).addClass("animate__animated animate__faster");
			$("li:not(:first-child)", $(this.element)).hide();
			$("li:first-child", $(this.element)).addClass("animate__fadeInUp");
		},
		//...