JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="accordion">

  <h3><a href="#">Section 1</a></h3> <!-- consider just this section -->

  <div>
    <button>Lorem</button>
    <button>Ipsum</button>
  </div>
  <h3><a href="#">Section 2</a></h3>

  <div>
    <p>Section 2 Content</p>
  </div>
  <h3><a href="#">Section 3</a></h3>

  <div>
    <p>Section 3 Content
      <br />Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections.
      <br /><a href="http://huwshimi.com/comic/"><img src="http://dotnet.tech.ubc.ca/CourseWiki/images/a/a5/You_must_be_this_tall.png" style="border:none;width:300px"/></a>

    </p>
  </div>
  <h3><a href="#">Section 4</a></h3>

  <div>
    <p>Section 4 Content
      <br />Thanks for reading all four sections.</p>
  </div>
</div>

CSS

button{
  display: block;
  width: 100%;
}

JavaScript

$("div#accordion").accordion({ heightStyle: "content", collapsible: true});

$("button").button();

$("button").click(function(){
  $(this).append($("<i class='fa fa-eye'></i>")).button();
});