I've created a toggle switch and now I want to incorporate it into my website, but I'm unsure of how to do so. The site uses the bbPress plugin on WordPress, and I would like users to be able to click the toggle switch when leaving a comment, with their input then being displayed in the comment.
Here is the HTML for the toggle switch:
<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">
<!-- ____[OUTER BOX WITH BORDER LINE]____ -->
<div class="toggle__box">
<!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
<input type="checkbox" id="toggle-check">
<!-- ____[TOGGLE LABEL FOR INPUT]____ -->
<label for="toggle-check" class="toggle__label">
<!-- ____[TOGGLE THUMB ICON]____ -->
<div class="toggle__thumb">
<img src= <?php get_image_for_slider(); ?> >
</div>
<!-- ____[TEXT OF TOGGLE]____ -->
<div class="toggle__text--green">BULLISH</div>
<div class="toggle__text--red">BEARISH</div>
</label>
</div>
</div>
And here is the CSS for this button: *, *::before, *::after { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}`
Is there a way to link a variable to this switch/checkbox so that when the user clicks it, I can use that to display something on the screen as described above? I attempted using isset($_POST["name"], but it didn't work. I've heard that adding an event listener in JavaScript might work, but I am unfamiliar with coding in JavaScript. Any help would be greatly appreciated!
Thank you