JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="biographies" class="is-hidden">Biography</div>
<div id="pictures" class="is-hidden">Pictures</div>
<div id="poetry" class="is-hidden">Poetry</div>

<button type="button" class="button" data-toggle="#biographies">
  <i></i> biographies
</button>

<button type="button" class="button" data-toggle="#pictures">
  <i></i> pictures
</button>

<button type="button" class="button" data-toggle="#poetry">
  <i></i> poetry
</button>

CSS

.is-hidden {
  display: none;
}

[data-toggle] i:before{
  font-family: "FontAwesome";
  font-style: normal;
  content: "\f067"; /* Plus */
}

[data-toggle].is-expanded i:before{
  content: "\f068"; /* Minus */
}

JavaScript

// Override defaults with localStorage
const state = Object.assign({
  "#biographies": false,
  "#pictures": false,
  "#poetry": false
}, JSON.parse(localStorage.state || "{}"));

const toggle = (k, v) => {
  $(k).toggleClass('is-hidden', !v);
  $(`[data-toggle="${k}"]`).toggleClass('is-expanded', v);
};

// On init
Object.entries(state).forEach(([k, v]) => toggle(k, v));

// On click
$("[data-toggle]").on("click", function() {
  const id = this.dataset.toggle;
  state[id] = !state[id];
  toggle(id, state[id]);
  localStorage.state = JSON.stringify(state);
});