Ein zusätzliches Formularelement ein- und ausschalten über eine Checkbox.
StyleSheet Lösung
<!DOCTYPE html >
<html>
<head>
<title>Show / Hide</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
<style type="text/css">
.toggle-content {
display: none;
}
#toggle:checked ~ .toggle-content {
display: block;
}
</style>
</head>
<body>
<form><input type="checkbox" id="toggle" /><label for="toggle">alternativer Text</label><label class="toggle-content">Label:<input type="email" /></label></form>
</body>
</html>JavaScript Lösung
<!DOCTYPE html >
<html>
<head>
<title>Show/Hide Div Content Demo</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
</head>
<body>
<form><input type="checkbox" name="checkbox" id="checkbox_id" value="true" onchange="document.getElementById('toggle_id').style.display = this.checked ? 'block' : 'none';" /><label for="checkbox_id">alternativer Text</label><br />
<div id="toggle_id" style="display:none;"><label for="textbox">Label:</label><input type="text" name="textbox" id="textbox" /></div>
</form>
</body>
</html>