JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<div id="accordion">
		<h3>Section 1</h3>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna augue, pretium quis commodo vel, tristique quis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin neque id odio dignissim ac dignissim libero iaculis. Sed lectus odio, vehicula et placerat ut, posuere sit amet dolor. Nam ipsum est, lobortis id laoreet sit amet, malesuada in odio. Nam tincidunt molestie nisi at dictum. Nulla quis rhoncus lectus. Ut nisl sapien, dignissim eu adipiscing non, bibendum ut est. Quisque accumsan eleifend dui, non hendrerit nulla pellentesque in. In in lacus est, sit amet mattis erat. Vestibulum erat purus, placerat eu varius a, pretium sit amet felis. Nunc leo leo, volutpat id tempor nec, vulputate eget nibh. In eleifend, est id sollicitudin congue, dui est malesuada urna, vel aliquet nisl dui vitae massa. Nunc luctus luctus libero, et fringilla est scelerisque sed. Curabitur consectetur varius purus ut facilisis.</p>

			<p>In hac habitasse platea dictumst. Mauris et nisl orci, eget faucibus neque. Suspendisse bibendum nisi ut ligula imperdiet non dignissim lectus congue. Proin id nisi arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in dui sapien. Proin eget dolor lobortis enim imperdiet pretium. Sed quam nibh, mattis vel aliquam eu, sollicitudin placerat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla arcu mauris, auctor sed rhoncus non, mollis a lacus. Duis viverra leo eu erat rhoncus hendrerit pretium augue tincidunt. Ut velit sem, lobortis in dignissim a, fermentum nec tortor. Mauris nibh quam, rhoncus quis fermentum eu, pharetra id est. Mauris dictum rutrum sem et euismod. Suspendisse sem arcu, aliquet a blandit non, pretium in purus. Praesent aliquet, lacus vitae eleifend lacinia, ante sem pulvinar dolor, imperdiet interdum libero...

CSS

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}
#accordion {
	width: 300px;
}

JavaScript

$(function() {
	$( "#accordion" ).accordion({
		heightStyle: "content",
		collapsible: true,
		active: false,
		activate: function( event, ui ) {
			if(!$.isEmptyObject(ui.newHeader.offset())) {
				$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
			}
		}
	});
});