|
|
@@ -0,0 +1,134 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+<style>
|
|
|
+#persons{
|
|
|
+ width: 80%;
|
|
|
+ max-height: 80vh;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.person {
|
|
|
+ background-color: #eee;
|
|
|
+ color: #444;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 18px;
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ text-align: left;
|
|
|
+ outline: none;
|
|
|
+ font-size: 15px;
|
|
|
+ transition: 0.4s;
|
|
|
+}
|
|
|
+
|
|
|
+.person:hover {
|
|
|
+ background-color: #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.extend {
|
|
|
+ padding: 0 18px;
|
|
|
+ display: none;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+img{
|
|
|
+ width: 120px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<script>
|
|
|
+
|
|
|
+</script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<h2>Tabelle</h2>
|
|
|
+
|
|
|
+
|
|
|
+<div id="persons">
|
|
|
+ <div class="person">
|
|
|
+ Martin
|
|
|
+ <div class="extend">
|
|
|
+ <img src="foto.png"/>
|
|
|
+ <p>Martin Venzl</p>
|
|
|
+ <p>Geschwindigkeit: </p>
|
|
|
+ <p>Online seit: </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="person">
|
|
|
+ Simon
|
|
|
+ <div class="extend">
|
|
|
+ <img src="foto.png"/>
|
|
|
+ <p>Simon Ellinger</p>
|
|
|
+ <p>Geschwindigkeit: </p>
|
|
|
+ <p>Online seit: </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="person">
|
|
|
+ Lukas
|
|
|
+ <div class="extend">
|
|
|
+ <img src="foto.png"/>
|
|
|
+ <p>Lukas Wagner</p>
|
|
|
+ <p>Geschwindigkeit: </p>
|
|
|
+ <p>Online seit: </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="person">
|
|
|
+ Bernie
|
|
|
+ <div class="extend">
|
|
|
+ <img src="foto.png"/>
|
|
|
+ <p>Bernadette Hammerle</p>
|
|
|
+ <p>Geschwindigkeit: </p>
|
|
|
+ <p>Online seit: </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+<button onclick="sortDivs()">Reverse</button>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+var person = document.getElementsByClassName("person");
|
|
|
+var i;
|
|
|
+
|
|
|
+for (i = 0; i < person.length; i++) {
|
|
|
+ person[i].addEventListener("click", function(event) {
|
|
|
+ this.classList.toggle("active");
|
|
|
+ var targetElement = event.target || event.srcElement;
|
|
|
+ /*var panel = this.nextElementSibling;*/
|
|
|
+ var extend = targetElement.children[0];
|
|
|
+ if (extend.style.display === "block") {
|
|
|
+ extend.style.display = "none";
|
|
|
+ } else {
|
|
|
+ extend.style.display = "block";
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function sortDivs(){
|
|
|
+ var nodes = document.getElementsByClassName("person");
|
|
|
+ var j;
|
|
|
+ var personArray = [];
|
|
|
+ for (j=0; j<nodes.length; j++) {
|
|
|
+ personArray.push(nodes[j]);
|
|
|
+ }
|
|
|
+
|
|
|
+ personArray.reverse();
|
|
|
+
|
|
|
+ var i;
|
|
|
+ for (i=0; i<personArray.length; i++) {
|
|
|
+ document.getElementById("persons").appendChild(personArray[i]);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
