Radio Button Layer Display Demo

Select Contact Details, Contact Form, or Hide All.

Return to tutorial on Managing display layer by period button

JavaScript

const choiceForm = document.getElementById("contact-choice");
const detailsPanel = document.getElementById("contact-details");
const formPanel = document.getElementById("contact-form");

function showPanel(panelId) {
  detailsPanel.hidden = panelId !== "contact-details";
  formPanel.hidden = panelId !== "contact-form";
}

choiceForm.addEventListener("change", (event) => {
  if (event.target.matches('input[name="type"]')) {
    showPanel(event.target.dataset.show);
  }
});

HTML

<form id="contact-choice" action="period-layerck.php" method="post">
  <fieldset>
    <legend>Choose what to display</legend>
    <label><input type="radio" name="type" value="details" data-show="contact-details"> Contact Details</label>
    <label><input type="radio" name="type" value="form" data-show="contact-form"> Contact Form</label>
    <label><input type="radio" name="type" value="hide-all" data-show="none"> Hide All</label>
  </fieldset>

  <div id="contact-details" class="contact-panel" hidden>
    <strong>Contact Details</strong><br>
    First Name:<br>Street Address:<br>City:<br>Zip:<br>State:<br>Country
  </div>

  <div id="contact-form" class="contact-panel" hidden>
    <strong>Contact Form</strong><br>
    <label>Name <input type="text" name="sname"></label><br>
    <label>Email <input type="email" name="email"></label><br>
    <label>Details<br><textarea name="dtl" rows="3" cols="25"></textarea></label><br>
    <button type="submit">Submit</button>
  </div>
</form>

CSS

.contact-panel {
  margin-top: 1rem;
  max-width: 420px;
  padding: 1rem;
  background: #f1f1f1;
  color: #000;
  border: 2px dashed #0000cc;
}
.contact-panel[hidden] { display: none; }