JSFiddle - React, Tailwind, and code Playground

HTML

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

<button class="button" data-circle="biographies">
    <i class="fa fa-plus"></i> biographies
</button>

<button class="button" data-circle="pictures">
    <i class="fa fa-plus"></i> pictures
</button>

<button class="button" data-circle="poetry">
    <i class="fa fa-plus"></i> poetry
</button>

JavaScript

var localStorageKey = "app_state";

// to preserve state, you first need to keep track of it
var default_state = {
    biographies: false,
    pictures: false,
    poetry: false
}

var saved_state = localStorage.getItem(localStorageKey);

// ternary operator which means if `saved_state` is true we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;

$(function() {
    init();

	$('.button').on('click', function() {
		var circle = $(this).attr('data-circle');
        toggleCircle(circle, !state[circle]);
        $(this).find('i').toggleClass('fa-minus fa-plus');
	});
});


function init() {
    for(var key in state) {
        var is_displayed = state[key];
        console.log(is_displayed);
        toggleCircle(key, is_displayed);
    }
}

function toggleCircle(circle, is_displayed) {
    if (is_displayed) {
        $('.'+circle).show()
        state[circle] = true;
    } else {
        $('.'+circle).hide()
        state[circle] = false;
    }
    
    localStorage.setItem(localStorageKey, JSON.stringify(state));
}