We Keep Coding

Try to hide a class when "mouseleve"?

I try to solve a problem. I have a video player on my website. I want to manipulate some classes i created like the navigation bar on the bottom of the video.
The video player has a navigation bar. I want to hide the navigation bar when my mouse is not above the video:
I try to move hide the navigation list with this:
var navigation = document.getElementById("videoslider").getElementByClassName("navigation");
document.getElementById("videoslider").addEventListener("mouseleave", function() {
navigation.style.visibility = "hidden";
});
I cant make it work. What is wrong here?
<script type="text/javascript">
var sliderVidEl = document.getElementById("sliderVid");
var overlay = document.getElementById("wrapper");
function playPause() {
if (sliderVidEl.paused) {
sliderVidEl.play();
overlay.style.backgroundImage = "";
} else {
sliderVidEl.pause();
overlay.style.backgroundImage = "url('https://felixandstefanproduction.de/wp-content/uploads/2023/01/playOverlay.png')";
}
}
function videoselector (videoLink) {
sliderVidEl.muted = false;
overlay.style.backgroundImage = "";
document.getElementById('sliderVid').src=videoLink;
}
//Mute button
$('#sliderVidMute').click(function(){
if( $("#sliderVid").prop('muted') ) {
$("#sliderVid").prop('muted', false);
} else {
$("#sliderVid").prop('muted', true);
}
});
</script>
<script>
window.onload=function(){
var navigation = document.getElementById("videoslider").getElementByClassName("navigation");
document.getElementById("videoslider").addEventListener("mouseleave", function() {
navigation.style.visibility = "hidden";
});
document.getElementById("videoslider").addEventListener("mouseover", function() {
navigation.style.visibility = "visible";
});
</script>
<style>
#videoslider{
position: relative;
width: 100%;
height: 75vh;
z-index: 1;
}
#videoslider video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
#videoslider .navigation{
position: absolute;
padding: 1px;
bottom: 0%;
width: 80%;
margin-left: 10%;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
#videoslider .navigation li{
list-style: none;
cursor: pointer;
border-radius: 4px;
margin: 1px;
opacity: 0.7;
}
#videoslider .navigation li img{
transition: 0.5s;
width: 120px !important;
height: 70px;
}
#videoslider .navigation li img:hover{
scale: 1.4;
}
#videoslider .buttonMute{
color: none;
border: none;
border-radius: 10px;
background-image: url( 'https://felixandstefanproduction.de/wp-content/uploads/2023/01/icon_mute.png' );
background-size: 30px 30px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
position: absolute;
padding: 1px;
bottom: 3%;
height: 40px;
width: 40px;
margin-left: 2%;
margin-top: 2%;vide
display: flex;
justify-content: center;
align-items: center;
}
#wrapper {
width: 100%;
height: 100%;
background-image: ;
background-position: center;
background-size: cover;
}
#media only screen and (max-width: 600px) {
#videoslider .navigation li img{
transition: 0.5s;
width: 68px !important;
height: 40px;
}
#videoslider .navigation{
width: 90%;
margin-left: 5%;
}
}
</style>
<section id="videoslider">
<div id="wrapper" onclick="playPause()">
<video id="sliderVid" loop playsinline autoplay="true" muted="true">
<source src="https://felixandstefanproduction.de/wp-content/uploads/2023/01/LoopLoop.mp4">
</video>
</div>
<ul class="navigation">
<li onclick="videoselector('https://felixandstefanproduction.de/wp-content/uploads/2023/01/Trailer_169_TSVStarnberg_HD_20RF_WO.mp4')"><img src="https://felixandstefanproduction.de/wp-content/uploads/2023/01/Thumb_TSVStarnberg.jpg"></li>
</section>
<script type="text/javascript">
var sliderVidEl = document.getElementById("sliderVid");
var overlay = document.getElementById("wrapper");
function playPause() {
if (sliderVidEl.paused) {
sliderVidEl.play();
overlay.style.backgroundImage = "";
} else {
sliderVidEl.pause();
overlay.style.backgroundImage = "url('https://felixandstefanproduction.de/wp-content/uploads/2023/01/playOverlay.png')";
}
}
function videoselector(videoLink) {
sliderVidEl.muted = false;
overlay.style.backgroundImage = "";
document.getElementById('sliderVid').src=videoLink;
}
//Mute button
$('#sliderVidMute').click(function(){
if( $("#sliderVid").prop('muted') ) {
$("#sliderVid").prop('muted', false);
} else {
$("#sliderVid").prop('muted', true);
}
});
</script>
<script>
window.onload=function(){
var navigation = document.getElementByClassName("navigation");
document.getElementById("videoslider").addEventListener("mouseleave", function() {
navigation.style.visibility = "hidden";
});
document.getElementById("videoslider").addEventListener("mouseover", function() {
navigation.style.visibility = "visible";
});
</script>

Use mouseover event to remove the .hidden CSS. The CSS .hidden class should have display: none in it.
.addEventListener("mouseover", (event) => {
// remove .hidden from your taskbar
}

Using an overlapped element to create drag-zoom effect on image

I have this mockup:
where the white button lets you drag the iPhone mockup to the left and right, giving a distorted/zoomed perspective of the image in the background.
The drag functionality works, what I'm looking for is a solution that gives the distorted/zoomed view in the iPhone-mockup. I've been fiddling with the mask-property, but can't achieve what I want.
jQuery, JS, CSS, SCSS solutions are welcome.
(The image in the code isn't the exact same as the one in the mockup, ignore that)
Snippet
(works best in full page view)
let draggable = $('.phone-mockup-container'); //element
let dragTrigger = $('.phone-trigger');
dragTrigger.on('mousedown', function(e) {
let dr = draggable.addClass("drag");
height = dr.outerHeight();
width = dr.outerWidth();
max_left = dr.parent().offset().left + dr.parent().width() - dr.outerWidth();
min_left = dr.parent().offset().left;
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e) {
let ileft = e.pageX + xpos - width;
if (dr.hasClass("drag")) {
if (ileft <= min_left) {
ileft = min_left;
}
if (ileft >= max_left) {
ileft = max_left;
}
dr.offset({
left: ileft
});
}
}).on('mouseup', function(e) {
dr.removeClass("drag");
});
});
.phone-mockup-wrapper {
position: relative;
}
.phone-mockup-container {
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 2;
max-width: 355px;
}
.phone-mockup {
-o-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
user-drag: none;
user-select: none;
position: relative;
}
.phone-trigger {
position: absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -100%);
max-width: fit-content;
font-size: 29px;
padding: 13px;
border-radius: 50%;
background-color: white;
cursor: move;
}
.image {
max-width: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="phone-mockup-wrapper">
<div class="phone-mockup-container">
<img class="phone-mockup" src="https://i.ibb.co/NpXQY30/iphone-mockup.png">
<span class="phone-trigger">drag</span>
</div>
</div>
<img class="image" src="https://i.ibb.co/MPwGfmc/7e8db8b589fe8defd6b9cc051a676a19.png">

I managed to solve this by using the same image as background-image and a combination of background-size, overflow and the value generated from the function that lets you drag the iPhone-mockup.
let draggable = $('.phone-mockup-container');
let dragTrigger = $('.phone-trigger');
let eller = $('.phone-area');
dragTrigger.on('mousedown', function(e) {
eller.addClass('dragger');
let dr = draggable.addClass("drag");
height = dr.outerHeight();
width = dr.outerWidth();
max_left = dr.parent().offset().left + dr.parent().width() - dr.outerWidth();
min_left = dr.parent().offset().left;
xpos = dr.offset().left + width - e.pageX;
$(document.body).on('mousemove', function(e) {
let ileft = e.pageX + xpos - width;
if (dr.hasClass("drag")) {
if (eller.hasClass("dragger")) {
if (ileft <= min_left) {
ileft = min_left;
}
if (ileft >= max_left) {
ileft = max_left;
}
dr.offset({
left: ileft
});
let test = document.querySelector('.drag');
let left = test.style.left;
$(eller).css('backgroundPositionX', '-' + left);
}
}
}).on('mouseup', function(e) {
dr.removeClass("drag");
eller.removeClass("dragger");
});
});
.phone-mockup-wrapper {
position: relative;
}
.phone-mockup-container {
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 2;
max-width: 355px;
overflow: hidden;
}
.phone-mockup {
-o-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
user-drag: none;
user-select: none;
position: relative;
z-index: 2;
}
.phone-area {
background-image: url('https://i.ibb.co/MPwGfmc/7e8db8b589fe8defd6b9cc051a676a19.png');
position: absolute;
top: 4.3%;
top: 1.2%;
left: 5%;
height: 97%;
width: 90%;
z-index: 1;
border-radius: 10px;
pointer-events: none;
background-repeat: no-repeat;
background-size: 820px 709px;
background-position: left;
border-radius: 20px;
}
.phone-trigger {
position: absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -100%);
max-width: fit-content;
font-size: 29px;
padding: 13px;
border-radius: 50%;
background-color: white;
cursor: move;
z-index: 10;
}
.image {
max-width: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="phone-mockup-wrapper">
<div class="phone-mockup-container">
<img class="phone-mockup" src="https://i.ibb.co/NpXQY30/iphone-mockup.png">
<div class="phone-area"></div>
<span class="phone-trigger">drag</span>
</div>
</div>
<img class="image" src="https://i.ibb.co/MPwGfmc/7e8db8b589fe8defd6b9cc051a676a19.png">

Slider Height Images

I have an image slider with thumbnails and am having a bit of a problem. When you click on the thumbnail of the last image, the thumbnails below as well as the arrows in the carousel jump down a bit. It doesn't happen to any of the other images. It's a small problem but it's driving me crazy and I don't know why it's happening, since I made sure all the images were the same height. Here's the codepen.
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = images.index($(".unidoor-class[data-active=true]"));
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
if ($nextImage.data('iframe')) {
$(images[nextIndex]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($nextImage.height());
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('#sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var images = $(".unidoor-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".unidoor-class[data-active=true]"));
if (currentShown === indexSelected) return false;
images.removeClass("active").attr('data-active', "false");
if ($(this).data('iframe')) {
$(images[indexSelected]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($(images[indexSelected]).height());
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('#sketchfab-iframe').removeClass('active');
}
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
// window.sr = ScrollReveal({reset: true});
// sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 100% !important; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p
{
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
/* width: 900px;
height: 600px; */
margin: 0 auto;
overflow: hidden;
}
#imgDetail a {
text-decoration: none;
display: flex;
/* padding: 8px 16px; */
padding: 3% ;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
/* margin: 15px 1% 0px 2%; */
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child{
padding-right: 0;
}
#green-room p {
display: block;
margin: 0 auto;
/* font-size: 1em !important; */
}
#green {
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
color: white;
font-family: 'Lato', sans-serif;
margin: 0 auto;
/* width: 100% !important;*/
}
#media(max-width: 767px){
#green-room p {
margin-right: 5% !important;
margin-left: 5% !important;
/* font-size: .75em !important; */
}
#green {
/* font-size: .75em !important; */
}
}
#media(min-width: 768px){
#green-room p {
width: 90% !important;
}
#green {
width: 90% !important;
}
}
.footer {
padding-top: 30px;
background-color: #333;
}
#sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#sketchfab-iframe {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}
#sketchfab-iframe.active {
opacity: 1;
position: relative;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" data-active="true" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" data-active="false" />
<img data-iframe="sketchfab-iframe" src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" data-active="false" />
<iframe id="sketchfab-iframe" width="600" height="400" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</div>
<p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="footer">
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>

iframe by default is an inline element
add style
display:block;
for
#sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;**
}
Codepen
Read more on https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element

How to fix vertical alignment of title and content inside resizable div?

When we hit the 'add image' button to the left, it adds a div with 2 <p> draggable and resizable into a container.
There is one <p> which is a Title (Titre) and another <p> which is the content of the div.
Here is the code :
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height : 768px;
width : 432px;
background-color : #000000;
}
.menu {
border:1px solid black;
padding-left:15px;
padding-right:15px;
padding-top:2px;
padding-bottom:2px;
float:left;
text-align : center;
}
h3, li, ul{
text-align : left;
}
.encadrer {
border: 1px solid white;
position:absolute !important;
}
.centrerTitre{
color : white;
margin : auto;
text-align : center;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.centrerPara{
font-size: 16;
color : white;
margin : auto;
text-align : center;
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
/*----- Resizable ------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-nw { cursor: nw-resize; height: 7px; width: 7px; top: -5px; left: -5px; }
.ui-resizable-se { cursor: se-resize; height: 7px; width: 7px; right: -5px; bottom: -5px; }
.ui-resizable-ne { cursor: ne-resize; height: 7px; width: 7px; top: -5px; right: -5px; }
.ui-resizable-sw { cursor: sw-resize; height: 7px; width: 7px; left: -5px; bottom: -5px; }
/*----------------------*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Affichage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<body>
<div id="menu" class="menu">
<h3>Taille de l'écran</h3>
<select id='selector'>
<option value="1920x1080">1920x1080</option>
</select>
</br></br>
<table>
<tr>
<td><input type="radio" id="portrait" name="orientation" value="portrait" checked="checked">Portrait</td>
<td><input type="radio" id="paysage" name="orientation" value="paysage">Paysage</td>
</tr>
</table>
</br>
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
<script type="text/javascript">
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
var rad = document.getElementsByName('orientation');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = tailleEcran;
}
document.getElementById("selector").addEventListener("change", tailleEcran, false);
ajoutImg.onclick = function() {
//var name = prompt("Texte de l'image :");
var container = document.createElement("div");
container.className = 'encadrer';
var inner = document.createElement("div");
inner.className = 'inner';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
inner.appendChild(titre);
para.textContent = prompt("Texte de l'image :");;
para.className = 'centrerPara';
inner.appendChild(para);
container.appendChild(inner);
//var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
bg.appendChild(container);
$(container)
.draggable({containment:"parent"})
.resizable({
containment:"parent",
handles: "all"
});
};
function tailleEcran() {
switch(document.getElementById("selector").value){
case '1920x1080' :
if(document.getElementById("portrait").checked == true){
bg.style.height = '768px';
bg.style.width = '432px';
}else{
bg.style.height = '432px';
bg.style.width = '768px';
}
break;
}
}
</script>
</body>
</html>
You can see that the 'Titre' stays at the middle of the page when you resize. I want this title to stay at the top of the div (the white square) but the content to stay at the middle. This is very noticeable after you resize the white squares.

Has i understand you just need to stick the title on the top of your square.
You can do it by adding this to the centerTitre class:
position: absolute;
top: 0;
left: 0;
right: 0;
Tell me if that's you want.

How Do I Toggle Tabs in JQuery

I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.

You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});

Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});

Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ