diedVIPs

html knowhow

Scrollleiste mit Button









Scrollleiste mit Button

Damit können Sie mit klicken des Buttons eine Textbox öffnen.
So sieht´s aus

Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können.



Quellcode
<html>
<head>

<style type="text/css">
.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;display: none;overflow: hidden;background-color: #f1f1f1;}
</style>
</head>

<body>
<button type="button" class="collapsible">Ausfahrbahre Textbox</button>
<div class="content">
<p>Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können. </p>
</div><br/>
<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.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum