JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div class="item-details-content">
    <fieldset id="Attachments">
        <legend><i class="fieldset-expander icon-chevron-right"></i>Items</legend>
        <div style="display: none;" class="fieldset-content">
            Content
        </div>
    </fieldset>
</div>

CSS

fieldset {
  padding: 0;
  margin: 0 0 1em;
  border: none;
}

legend {
  font-size: 1.1em;
  padding: 2px 0 8px 0;
  text-transform: uppercase;
}

.item-details-content legend {
  font-weight: bold;
  color: #888888;
  font-size: 12px;
  cursor: pointer;
}
.item-details-content legend .fieldset-expander {
  display: block;
  float: left;
  width: 12px;
  height: 12px;
  font-size: 12px;
  margin: 2px 5px 0 0;
}

JavaScript

$(".item-details-content > fieldset > legend").click(function(){
    if ($(this).find("i").hasClass("icon-chevron-right"))
        $(this).find("i").toggleClass("icon-chevron-right icon-chevron-down");
    else
        $(this).find("i").toggleClass("icon-chevron-down icon-chevron-right");
    
    $(this).parent().find(".fieldset-content").toggle();
});