OD tags

A way to display tags and make them clickable.

by John kuoppala

HTML

Tier 1: <div class="tag tier1" id="dmf" onclick="toggle('dmf')">DMF</div>
<div class="tag tier1" id="dhf" onclick="toggle('dhf')">DHF</div>
<div class="tag tier1" id="dhr" onclick="toggle('dhr')">DHR</div><br >

Tier 2: <div class="tag tier2" id="cranial" onclick="toggle('cranial')">Cranial PSI</div>
<div class="tag tier2" id="facial" onclick="toggle('facial')">Facial PSI</div>
<div class="tag tier2" id="craniomosaic" onclick="toggle('craniomosaic')">Craniomosaic EU</div><br >

Tier 3: <div class="tag tier3" id="ifu" onclick="toggle('ifu')">ifu</div>
<div class="tag tier3" id="patient_specific_label" onclick="toggle('patient_specific_label')">patient specific label</div>
<div class="tag tier3" id="endotoxins" onclick="toggle('endotoxins')">endotoxins</div><br >

<p id="summary"></p>

CSS

body {
  font-family: Verdana;
  font-size: 16px;
}

.tag {
  margin:10px;
  display: inline-block;
  padding: 5px 15px 5px 15px;
  color: #777777;
  font-weight: bold;
  background-color: #d0f796;
  box-shadow: 0px 0px 10px #888888;
  border-radius: 20px;
  cursor: pointer;
}

.pressed {
  box-shadow: 0px 0px 0px #888888;
  color:black;
}

.tier1 {
  background-color: #d0f796;
}

.tier2 {
  background-color: #f4da7c;
}

.tier3 {
  background-color: #cfabd6;
  font-size:12px;
}

#summary {
  font-size:10px;
}

JavaScript

function toggle(id) {
	var el = document.getElementById(id);
	if ((' ' + el.className + ' ').indexOf(' ' + "pressed" + ' ') > -1) {
  	el.className =
     el.className.replace
        ( /(?:^|\s)pressed(?!\S)/g , '' )
  }
	else {
  	el.className += " pressed";
  }
  var slides = document.getElementsByClassName("pressed");
  var content = "Specificerad sökning: ";
  if (slides.length == 0) {
  	content = "";
  }
  for(var i = 0; i < slides.length; i++)
  {
     content += slides[i].innerHTML+", ";
  }
  document.getElementById("summary").innerHTML=content.substring(0,content.length-2);
}