dna.js ~~ Panel drop-down

An uncomplicated user interface library

by pilafmon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/dna.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dna.min.js"></script>
<h2>Author Information</h2>

<select class=dna-menu data-nav=author-info>
   <option id=selector class=dna-template>~~name~~</option>
</select>

<div class=dna-panels data-nav=author-info>
   <section id=author class=dna-template>
      <h3>Name:     <cite>~~name~~</cite></h3>
      <p>Publisher: <b>~~publisher~~</b></p>
      <p>Agent:     <b>~~agent~~</b></p>
   </section>
</div>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 30px;
   }   
select {
   font-size: 1.2rem;
   margin-bottom: 10px;
   }
section.panel {
   background-color: goldenrod;
   padding: 10px 20px;
   }

JavaScript

// dnajs.org

const authors = [
   { name: 'Jake', publisher: 'BioOne',  agent: 'N/A' },
   { name: 'Abby', publisher: 'Addison', agent: 'Pro Reps' },
   { name: 'Ed',   publisher: 'ACS',     agent: 'Feven' },
	];
dna.clone('selector', authors);
dna.clone('author',   authors);