deputat/accordeio-css.html
2023-04-25 13:25:59 +02:00

125 lines
3.0 KiB
HTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="templates/modern/css/styles_refill.css">
<script src='iframe-resizer-master/js/iframeResizer.min.js'></script>
<meta charset="utf-8" />
<title></title>
<style>
.wrap { max-width: 100%; margin: 1em auto; }
/*--------Accordion-------*/
/*--------Accordion-------*/
.accordion h6{
color:#fff;
text-align:center;
font-weight: 300;
}
.accordion {
width: 100%;
margin: auto;
height: 480px;
}
.accordion .panel {
width: 98%;
width: calc(100% - 20px);
margin: 0 auto;
margin-bottom: 5px;
height: 0;
overflow:hidden;
color: rgba(0, 0, 0, 0);
background-color: hsla(0,0%,100%,0);
line-height: 28px;
padding: 0 20px;
box-sizing: border-box;
transition: 0.5s;
}
.accordion label {
cursor: pointer;
background-color: #277DA8;
display: block;
padding: 10px;
width: 100%;
color: #fff;
font-weight: 400;
box-sizing: border-box;
z-index: 100;
}
.accordion input{
display: none;
}
.accordion input:checked+label {
background-color: hsla(200,80%,50%,0.9);
}
.accordion input:checked+label:before {
transition: 0.5s;
}
.accordion input:checked~.panel {
height: auto;
color: #333;
font-size: 16px;
padding: 20px;
transition: 0.5s;
}
.accordion label:after { content: " + "; color: white; float: right; font-size: 1.6em}
.accordion input:checked+label:after { content: " "; color: white; float: right;font-size: 1.6em }
</style>
</head>
<body>
<div class="wrap">
<div class="accordion">
<div>
<input type="radio" name="acc" id="$$78" checked>
<label for="$$78">Ermäßigung/Freistellung Rektorat/Dekanat (§§ 7, 8 LVVO)</label>
<div class="panel">
<iframe src='erm_freist_rektorat_dekanat.php' width='100%' frameborder='0' ></iframe>
</div>
</div>
<div>
<input type="radio" name="acc" id="§11">
<label for="§11">Deputatsermäßigung aufgrund einer Funktion/Beauftragung (§ 11 LVVO)</label>
<div class="panel">
<iframe src='erm_freist_funktion.php' width='100%' frameborder='0' ></iframe>
</div>
</div>
<div>
<input type="radio" name="acc" id="Fruitcake">
<label for="Fruitcake">Fruitcake?</label>
<div class="panel">
<p>Fruitcake marshmallow sugar plum soufflé biscuit.</p>
<p>Sesame snaps pie lemon drops.</p>
</div>
</div>
</div>
</div>
<script>
(function () {
"use strict";
var acco = document.querySelectorAll (".accordion>div");
var maxHeight = 0;
var labelTotal = 0;
for (var i=0; i<acco.length; i++) {
acco[i].querySelector("input").checked = true;
if (acco[i].clientHeight > maxHeight) {
maxHeight = acco[i].clientHeight;
}
labelTotal = labelTotal + acco[i].querySelector("label").clientHeight;
}
acco[0].querySelector("input").checked = true;
document.querySelector(".wrap").style.height = (maxHeight + labelTotal) + "px";
})()
</script>
<script>iFrameResize({log:true})</script>
</body>
</html>