JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="display:none">
  <defs>
    <path id="arrow" d="M8.485 7.142l7.07-7.07 1.416 1.413L8.487 9.97l-.707-.707L0 1.485 1.414.07l7.07 7.072z" fill="#213543" fill-rule="evenodd" fill-opacity=".7"/>
  </defs>
</svg>

<!-- master image -->
<div class="ba b--black-20 ph2 pv3 cf pointer">
  <span>What is a master image?</span>
  <svg width="17" height="10" viewBox="0 0 17 10" class="fr open-box"><use href="#arrow"/></svg>
  <svg width="17" height="10" viewBox="0 0 17 10" class="fr close-box closeInfo"><use href="#arrow"/></svg>
  <div class="pa2 open-info">
    <span class="measure">A master image is any image used by imgix to create and deliver derivative images. You can store master images in an Amazon S3 bucket, a web folder on your website, or any other addressable web storage location that you control.</span>
  </div>
</div>

<!-- derivative image -->
<div class="ba b--black-20 ph2 pv3 cf pointer">
  <span>What is a derivative image?</span>
  <svg width="17" height="10" viewBox="0 0 17 10" class="fr open-box"><use href="#arrow"/></svg>
  <svg width="17" height="10" viewBox="0 0 17 10" class="fr close-box closeInfo"><use href="#arrow"/></svg>
  <div class="pa2 open-info">
    <span class="measure">A derivative image is created in response to an imgix request. We fetch a master image (either from your image location or from our caches) and process, transform, and format it to your specifications into the image that is delivered to your users. Each derivative can have multiple parameters assigned.</span>
  </div>
</div>

<!-- cost change -->
<div class="ba b--black-20 ph2 pv3 cf pointer">
  <span>How will my costs change over time?</span>
  <svg width="17" height="10" viewBox="0 0 17 10" class="fr open-box"><use href="#arrow"/></svg>
  <svg width="17" height="10" viewBox="0 0 17 10" class="fr close-box closeInfo"><use href="#arrow"/></svg>
  <div class="pa2 open-info">
    <span class="measure">Our pricing is designed to grow with you in a way that is easy to...

CSS

.ph2 {
  border: 1px solid #999;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 20px;
  padding: 1em;
  margin: 0.5em;
}

.close-box, .open-box {
  cursor: pointer;
  float:right;
}

.close-box {
  transform: rotate(180deg);
}

.close-box, .open-info {
  display: none;
}

.open-info {
  color:#999;
  margin:1em;
}

JavaScript

function hide ($container) {
  $container.find('.open-box').show();
  $container.find('.close-box').hide();
  $container.find('.open-info').slideToggle(false);
}

$('.open-box').click(function() {
  // hide previous
  var $prevContainer = $('.close-box:visible').parent();
  hide($prevContainer);
  
  // show current
  var $container = $(this).parent();
  $container.find('.open-box').hide();
  $container.find('.close-box').show();
  $container.find('.open-info').slideToggle(true);
});

$('.close-box').click(function() {
  // hide current
  var $container = $(this).parent();
  hide($container);
});