tab & click accordeon entrance (Gcyrillus)

dabblet.css

/** tab & click accordeon entrance (Gcyrillus) */
 h1, p , html , body {margin:0;padding:0;}
 html,body {
    height:100%;width:100%;
  }
  body {
    display:box;
    box-orient:vertical;
    box-pack:center;
    box-align:center;
  }
  div {
    width:250px;
    border-radius:1em;
    border:solid 2px;
    text-align:center;
    overflow:hidden;
    display:table;
    box-shadow:5px 5px 10px black;;
  }
  section{overflow:hidden;}
  h1 {background:#ccc;background-image:linear-gradient(90deg,#ccc,#aaa,#ccc);position:relative;}
  h1:focus {background-image:linear-gradient(90deg,#cde,#abc,#cde);}
  section:nth-child(3) {border-bottom:0;}
  h1 , section{border-bottom:1px solid;border-width:  1px 0 1px ; }
  p {max-height:0;text-align:justify;padding:0 5px;transition:0.75s;background-image:linear-gradient(-90deg,#fff, #abc);}
  h1:focus + p {max-height:400px;transition:0.75s;background-image:linear-gradient(-45deg,#eee,#cde);}
 
 

dabblet.html

<div tabindex="0" style="position:absolute;width:1em;top:2em;left:2em;" title="click me and tab">?</div>
<div>
    <section>
      <h1 tabindex="0" >Introduction</h1>
      <p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis
illius celsi</p>
    </section>
    <section>
      <h1 tabindex="0" >General information</h1>
      <p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae
ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente
aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam
parietes arcanorum soli conscii timebantur</p>
    </section>
    <section>
      <h1 tabindex="0" >Contact us</h1>
      <p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta
qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen
alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut
longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
    </section>
  </div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}