Pure Javascript Toggle Function

Specific use case instantiation

HTML

<div class="group">
  <div class="digid_trigger2">
    Dit is voor DigiD
  </div>
  <button id="digid_label" class="digid_trigger" tabindex="1"> Show DigiD information </button>
  <div class="digid_extra hidden">
    Extra informatie over DigiD
  </div>

</div>

<br/>
<br/>
<br/>

<div class="group">
  <input name="name" id="name" class="editable" placeholder="name">
  <label for="name" id="name_label" class="trigger" tabindex="2"> Edit</label>
</div>

<div class="group">
  <input name="rank" id="rank" class="editable" placeholder="rank">
  <div id="rank_label" class="trigger" tabindex="3"> Edit</div>
</div>

CSS

.group {
  margin: 10px;
  padding: 10px;
}

.group .digid_extra.hidden {
  display: none;
}


.group>input:not(.editing) {
  background: transparent;
  pointer-events: none;
  tab-index: -1;
  border: none;
  border-bottom: 1px solid #444444;
}

.trigger {
  display: inline-block;
  cursor: pointer;
  font-family: arial;
  border: 1px solid #000000;
  border-radius: 3px;
  text-transform: uppercase;
}

.trigger.editing-active {
  background: blue;
  color: white;
  border-color: blue;
}

JavaScript

function toggleEdit(trigger) {

  var triggerDoc = document.getElementById(trigger);
  
  var hideContent = 'hidden';
  var showTrigger = '';

  triggerDoc.addEventListener("click", function() {
    this.classList.remove(hideContent);
  });
  
}

toggleHidden("digid_trigger", "name");