JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="hide-a-btn"><img src="http://cdn.flaticon.com/png/24/10/10442.png" /></div>
<div class="show-a-btn"><img src="http://cdn.flaticon.com/png/24/7/7584.png" /></div>

<div class="hiding_block">
    Очень важная информация. Хотя, может и нет.<br />
    Ещё немного текста.<br />
    Если скучно и нет работы смотрите какие-нить видео на youtube :)
</div>

CSS

.hide-a-btn img, .show-a-btn img {
    cursor: pointer;
    width:24px;
    height:24px;
}
.hiding_block {
    font-family: sans-serif;
    font-style:italic;
    font-size:16px;
}

JavaScript

$(document).ready(function () {
		$(".hiding_block").css('display',
		localStorage.getItem('hiding_block'));
		var inStorage = localStorage.getItem('hiding_block');
		$(".hide-a-btn").click(function () {
			$( ".hiding_block" ).slideUp( "medium", function() {
				localStorage.setItem('hiding_block', 'none');
			});
		});
		$(".show-a-btn").click(function () {
			$( ".hiding_block" ).slideDown( "medium", function() {
				localStorage.setItem('hiding_block', 'block');
			});
		});
		if (inStorage == 'none') { 
			$(".show-a-btn").show();
			$(".hide-a-btn").hide();
		} else { 
			$(".show-a-btn").hide();
			$(".hide-a-btn").show();
		};
		$(".hide-a-btn").click(function () {
			$(".show-a-btn").show();
			$(".hide-a-btn").hide();   
		});
		$(".show-a-btn").click(function () {
			$(".hide-a-btn").show();
			$(".show-a-btn").hide();   
		});
	});