JSFiddle - React, Tailwind, and code Playground

by hajime_nagahata

HTML

<div id="normal">通常コンテンツ</div>

<div id="additional" hidden>追加コンテンツ</div>

CSS

#normal {
  cursor: pointer;
  text-decoration: underline;
}

div {
  animation: fade 2s;
}

@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

JavaScript

document.querySelector('#normal').addEventListener('click', ()=>{
	history.pushState(null, "", window.location.href+'&additional=true');
});

if (location.href.match(/[?&]additional=true/)) {
  document.querySelector('#additional').hidden = false;
}

document.querySelector('#normal').href = window.location.href;