JavaScript Show & Hide Controls

Ein zusätzliches Formularelement ein- und ausschalten über eine Checkbox.

StyleSheet Lösung

show_hide.htm HTML (609 Bytes) 19.10.2021 23:52
<!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


show_hide.htm HTML (725 Bytes) 19.10.2021 23:52
<!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>

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.71
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Tue, 26. Mar 2024 07:33:29

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.4 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz