JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div id="accordion">
<h3>Section 1
    <a href="#">
    <span class="menu-item">About</span>
    <img id="slide1" src="http://cdn1.iconfinder.com/data/icons/webset/16/mac.png"/>
  </a>
    </h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
Nam mi. Proin viverra leo ut odio.</p>
</div>
    <h3>Section 2 <a href="#">About <img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/22x22/actions/find.png"/></a></h3>
<div>
<p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
faucibus interdum tellus libero ac justo.</p>
</div>
<h3>Section 3 <a href="#">About <img src="http://cdn1.iconfinder.com/data/icons/icojoy/shadow/standart/gif/24x24/001_38.gif"/></a></h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
Quisque lobortis.Phasellus pellentesque purus in massa.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>

JavaScript

$( "#accordion" ).accordion({
    beforeActivate: function( event, ui ) {
        console.log(ui);
        if(ui.newHeader) {
            $('h3 a img').hide();
        }
    }
});