Switch mit Funktion

von tom | Jan. 2025 | Script

Du möchtest gerne einen Schalter (Switch) in deine Seite einbauen der auch etwas auslösen soll? Dann schauen wir uns mal an was man machen kann.

In diesem Beispiel nutzen wir zwei Zeilen mit je einem Bild, um das Auslösen eines Schalters (Switch) zu demonstrieren.

Switch mit Hilfe von Github

Links zu Github
Container | CSS | Script

Switch

✗ AUS ✓ AN

Anleitung
CSS-Klasse-1: „an“
CSS-Klasse-2: „aus“

Wir benötigen zwei Zeilen (grün) in den wir Ihnhalt packen.
In die Zeilen müssen wir nun auf Erweitert gehen und die folgenden CSS-Klassen eingeben.
Die erste Zeile bekommt die CSS-Klasse: an
Die zweite Zeile bekommt die CSS-Klasse: aus
Als nächstes benötigen wir ein Code-Modul wo wir den Switcher erstellen. Dafür geben wir den Code aus dem „Code-Modul-Container“ ein.
Ein weiteres Code-Modul für die Style-CSS, der Code im „Code-Module-Style-CSS“
Ein letztes Code-Modul für das Script aus dem „Code-Modul-Script“

Das Script kann man auch direkt in Divi eingeben oder mit dem Plugin „Code Snippet“.

Code-Modul-Container

&lt;div class="custom-wrapper"&gt;
&lt;span&gt;AUS&lt;/span&gt;
&lt;label class="switch"&gt;
&lt;input type="checkbox" class="checbox change-modul"&gt;
&lt;span class="slider round"&gt;&lt;/span&gt;
&lt;/label&gt;
&lt;span&gt;AN&lt;/span&gt;
&lt;/div&gt;

1

2

3

4

5

6

7

8

9

10

</label>

</div>

Code-Modul Style-CSS

&lt;style&gt;
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff0000;
transition: .4s;
box-shadow: 1px 1px 5px #666;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #7cda24;
}
input:focus + .slider {
box-shadow: 1px 1px 5px #666;
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.custom-wrapper {
display: flex;
grid-gap: 20px;
align-items: center;
justify-content: center;
}
&lt;/style&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<style>

.switch {

position: relative;

display: inline-block;

width: 60px;

height: 34px;

}

/* Hide default HTML checkbox */

.switch input {

opacity: 0;

width: 0;

height: 0;

}

/* The slider */

.slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ff0000;

transition: .4s;

box-shadow: 1px 1px 5px #666;

}

.slider:before {

position: absolute;

content: "";

height: 26px;

width: 26px;

left: 4px;

bottom: 4px;

background-color: white;

transition: .4s;

}

input:checked + .slider {

background-color: #7cda24;

}

input:focus + .slider {

box-shadow: 1px 1px 5px #666;

}

input:checked + .slider:before {

transform: translateX(26px);

}

/* Rounded sliders */

.slider.round {

border-radius: 34px;

}

.slider.round:before {

border-radius: 50%;

}

.custom-wrapper {

display: flex;

grid-gap: 20px;

align-items: center;

justify-content: center;

}

</style>

Code-Modul-Script

&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$( document ).ready(function() {
$('.aus').hide();
$('.change-modul').on('click',
function() {
$('.an, .aus').toggle();
}
);
});
&lt;/script&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

$( document ).ready(function() {

$('.aus').hide();

$('.change-modul').on('click',

function() {

$('.an, .aus').toggle();

}

);

});

</script>

← Akkordeons mit CSS Menü für Speisekarten erstellen →