JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<ul class="project-list list-group">
  <li class="list-group-item">GB-CHC-202918-LEBA46 Capacity building for Staff and partners on gender equality
    <div class="project-data">
      <table class="table table-striped">
        <tr>
          <td><b>Reporting-org:</b> [ref="GB-CHC-202918" type="21" ] Oxfam GB</td>
        </tr>
        <tr>
          <td><b>Participating-org:</b> [ref="GB-CHC-202918" role="Extending" type="21" ] Oxfam GB</td>
        </tr>
        <tr>
          <td><b>Participating-org:</b> [ref="GB-CHC-202918" role="Funding" type="21" ] Oxfam GB</td>
        </tr>
      </table>
    </div>
  </li>
  <li class="list-group-item">GB-CHC-202918-LEBA56 Provide Protection and WASH Assistance to Syrian Refugees in Tripoli and Bekaa
    <div class="project-data">
      <table class="table table-striped">
        <tr>
          <td><b>Reporting-org:</b> [ref="GB-CHC-202918" type="21" ] Oxfam GB</td>
        </tr>
        <tr>
          <td><b>Participating-org:</b> [ref="GB-CHC-202918" role="Extending" type="21" ] Oxfam GB</td>
        </tr>
        <tr>
          <td><b>Participating-org:</b> [ref="GB-CHC-202918" role="Funding" type="21" ] Oxfam GB</td>
        </tr>
      </table>
    </div>
  </li>
  <li class="list-group-item">GB-CHC-202918-LEBA57 Humanitarian Response and Assistance for People Affected by the Syrian Crisis
    <div class="project-data">
      <table class="table table-striped">
        <tr>
          <td><b>Reporting-org:</b> [ref="GB-CHC-202918" type="21" ] Oxfam GB</td>
        </tr>
        <tr>
          <td><b>Participating-org:</b> [ref="GB-CHC-202918" role="Extending" type="21" ] Oxfam GB</td>
        </tr>
        <tr>
          <td><b>Participating-org:</b> [ref="GB-CHC-202918" role="Funding" type="21" ] Oxfam GB</td>
        </tr>
      </table>
   ...

CSS

.project-list {
  list-style-type: none;
  margin: 20px;
}

.project-list li {
  cursor: pointer;
  padding: 6px;
}

.project-list li::before {
  content: '+ ';
}

.project-list li.minus::before {
  content: '− ';
}

.project-list .project-data {
  display: none;
}

.project-list li:hover {
  background-color: #EFEFEF;
}

JavaScript

$('.project-list li').on('click', function() {
  $li = $(this);
  $li.find('.project-data').stop().slideToggle(400, function() {
    $li.toggleClass('minus');
  });
})