JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<h1>Accordian Example</h1>
	 <div class="accordianWrap">
		 <ul class="collapsible">
			 <li>Group 01 - Item 01</li>
			 <li>Group 01 - Item 02</li>
			 <li>Group 01 - Item 03</li>
			 <li>Group 01 - Item 04</li>
		 </ul>
		 <div class="trigger">&#9660;</div>
	 </div>
	 <div class="accordianWrap">
		<ul class="collapsible">
		 <li>Group 02 - Item 01</li>
		 <li>Group 02 - Item 02</li>
		 <li>Group 02 - Item 03</li>
		 <li>Group 02 - Item 04</li>
		    </ul>
		 <div class="trigger">&#9660;</div>
	 </div>
	 <div class="accordianWrap">
		 <ul class="collapsible">
			 <li>Group 03 - Item 01</li>
			 <li>Group 03 - Item 02</li>
			 <li>Group 03 - Item 03</li>
			 <li>
				<div class="singleWrap">
					 <ul  class="subCollapsible">
						 <li>Single - Item 01</li>
						 <li>Single - Item 02</li>
						 <li>Single - Item 03</li>
						 <li>Single - Item 04</li>
					 </ul>
					 <div class="subTrigger">&#9660;</div>
				 </div>
			 </li>
		 </ul>
		 <div class="trigger">&#9660;</div>
	 </div>

JavaScript

/**
 * jQuery betshopHideShow Plugin
 *
 * creates a wrapper class to add hide/show functionality and/or accordion style behaviour
 *
 * @author Robin Buckley <[email protected]>
 *
 * @copyright Copyright © Tabcorp Pty Ltd. All rights reserved. http://www.tabcorp.com.au/
 * @license This code is copyrighted and is the exclusive property of Tabcorp Pty Ltd. It may not be used, copied or redistributed without the written permission of Tabcorp.
 *
 * @returns jQuery Element
 *
 * @notes : To create a NESTED instance the contentSelectors and triggerSelectors must be different from the parent instance
 *
 * @options :
 * {
 *  group : [],//Holds the related hide/show elements (for accordion style) **Do NOT pass this in the function
 *  contentSelector : '.collapse',//the class name of the content that will be shown/hidden
 *  triggerSelector : '.trigger',//the class name of the elements that will trigger the hide/show action
 *  swapText : true,//boolean - change the $().html() of the trigger on hide/show
 *  openText : "&#9650;",//the $().html() of the trigger on show
 *  closedText : "&#9660;",//the $().html() of the trigger on hide
 *  animationType : "blind",//the animation style ( see jQuery .animate() or jQueryUI .animate() )
 *  hideOnInit :true,//Unused
 *  hideOthers : true,//Boolean close other elements in group on show (for accordion style)
 *  openClass : 'active',//the class name that is assigned to open elements
 *  closedClass : 'inactive'//the class name that is assigned to closed elements
 * }
 *
 * Example Usage:
 * HTML:
 *
	 <h1>Accordian Example</h1>
	 <div class="accordianWrap">
		 <ul class="collapsible">
			 <li>Group 01 - Item 01</li>
			 <li>Group 01 - Item 02</li>
			 <li>Group 01 - Item 03</li>
			 <li>Group 01 - Item 04</li>
		 </ul>
		 <div class="trigger">&#9660;</div>
	 </div>
	 <div class="accordianWrap">
		<ul class="collapsible">
		 <li>Group 02 - Item 01</li>
		 <li>Group 02 - Item 02</li>
		 <li>Group 02 - Item 03</li>
		...