JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="accordion">
     <h3>accordion header 1</h3>

    <div>accordion content 1</div>
     <h3>accordion header 2</h3>

    <div>accordion content 2</div>
</div>

CSS

.ui-accordion .ui-accordion-header {font-weight:bold;font-size:1em;display: block;cursor: pointer;position: relative;margin-top: 10px;margin-bottom:0;padding: 5px;border: 1px solid #cccccc;background-color:#ccc;}
.ui-accordion .ui-accordion-content {padding: 0.5em 0.5em;border:1px solid #ccc;border-top-width:0;overflow: auto;}

JavaScript

$('#accordion').accordion({
    event: 'customClick'
});

$('#accordion> .ui-accordion-header').click(function () {
    if (confirm("Allow this?")) {
        $(this).trigger('customClick');
    }
});