JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css">
<ul id="accordion-example" uk-accordion>
	<li onclick="dontToggle()">
		<a class="uk-accordion-title" href=#>Item 1</a>
		<div class="uk-accordion-content">
			<p>Nunc non sapien lorem. Vivamus sed finibus erat. Maecenas nec volutpat tortor. Duis ac mollis libero. Maecenas interdum pretium massa, quis dapibus elit efficitur a. Pellentesque posuere lacinia aliquam. Proin dignissim finibus justo, eu iaculis ex vehicula at. Quisque viverra nunc finibus lorem luctus vehicula. Duis euismod porttitor ante, ac consequat diam bibendum nec.</p>
		</div>
	</li>
	<li onclick="dontToggle()">
		<a class="uk-accordion-title" href=#>Item 2</a>
		<div class="uk-accordion-content">
			<p>Nunc non sapien lorem. Vivamus sed finibus erat. Maecenas nec volutpat tortor. Duis ac mollis libero. Maecenas interdum pretium massa, quis dapibus elit efficitur a. Pellentesque posuere lacinia aliquam. Proin dignissim finibus justo, eu iaculis ex vehicula at. Quisque viverra nunc finibus lorem luctus vehicula. Duis euismod porttitor ante, ac consequat diam bibendum nec.</p>
		</div>
	</li>
	<li onclick="dontToggle()">
		<a class="uk-accordion-title" href=#>Item 3</a>
		<div class="uk-accordion-content">
			<p>Nunc non sapien lorem. Vivamus sed finibus erat. Maecenas nec volutpat tortor. Duis ac mollis libero. Maecenas interdum pretium massa, quis dapibus elit efficitur a. Pellentesque posuere lacinia aliquam. Proin dignissim finibus justo, eu iaculis ex vehicula at. Quisque viverra nunc finibus lorem luctus vehicula. Duis euismod porttitor ante, ac consequat diam bibendum nec.</p>
		</div>
	</li>
</ul>
<br/>
<!-- These buttons are just for example. We would actually use logical conditions for toggling to a particular index -->
<div>
	<button onclick="toggleTo(0)">Open Step 1</button>
	<button...

CSS

#accordion-example {
	margin: 20px;
	border: 3px solid #ddd;
	padding: 20px;
}

JavaScript

UIkit.util.on('#accordion-example','beforeshow',function(){
	return false;
});

window.dontToggle = function(){
	// I want to make sure when this method is called the item doesn't toggle at all
	event.preventDefault(); // Even prevent default doesn't work
	return false;
}

var accordion = UIkit.accordion(document.querySelector('#accordion-example'));

// This method will actually be called based on logic and not on click. 
// Here it is called onclick just for example
window.toggleTo = function(index){
	accordion.toggle(index);
}