Code Enlighter

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Verschachtelung / NESTING</button>
<div class="content">
  <p># Verschachtelung / NESTING  <br>
	# ... von if-statments<br>
	$num = 5;<br>
	if($num >= 5){      #   wir prüfen mit dem ersten statement ob >5.. kommt es nicht zum codeblock<br><br>
		
		if($num < 10) {<br>
			#echo "$num liegt zwischen 5 und 10";  # kommt zur ausführung des Codeblocks<br>
		}<br>
		<br>
	}<br>
	
		#9 LOGICAL OPERATORS / LOGISCHE OPERATOREN<br>
	/*
		AND - && 	=> Beide / Alle Bedingen müssen wahr sein<br>
		OR  - || 	=> Mindestens eine Bedingung muss/darf wahr sein<br>
		XOR	-		=> NUR eine Bedingung darf wahr sein<br>
					=> Damit das IF-Statement stimmt<br>
					und der Codeblock zur ausführung kommt <br>
	*/<br>
	$num = 3;	<br>
	if($num > 5 OR $num < 10){<br>
		echo "$num liegt zwischen 5 und 10.";<br>
	}</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>