I have Problem With jQuery:
In the following code, I want to close Sidenav by clicking outside when it opens
The problem is that when left sidenav is opened it no longer closes because the right sidenav is an element that was created before left sidenav and i do not know how to solve this problem
$("[data-open-sidenav]").on("click", function () {
console.log($(`#${$(this).data("open-sidenav")}`));
if (
$(this).data("open-sidenav").length > 0 &&
$(`#${$(this).data("open-sidenav")}`).length
) {
$(`#${$(this).data("open-sidenav")}`).animate(
{
left: "0",
},
300
);
}
});
$(window).on("click", function () {
if (parseInt($(".sidenav").css("left")) === 0) {
$(".sidenav").animate(
{
left: "-400px",
},
300,
"linear"
);
}
});
$(".sidenav").on("click", function (event) {
event.stopPropagation();
});
.sidenav {
height: 100%;
width: 400px;
position: fixed;
z-index: 1;
top: 0;
left: -400px;
background-color: #fff;
border-right: 1px solid #gray;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav li a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blue" data-open-sidenav="leftsn">Open Left Sidenav</button>
<button class="blue" data-open-sidenav="rightsn">Open Right Sidenav</button>
<div id="rightsn" class="sidenav right">
<li>Right Sidenav</li>
</div>
<div id="leftsn" class="sidenav">
<li>Left Sidenav</li>
</div>
You have two .sidenav elements in the DOM. Accessing them by css() will return the requested property from the first one only.
As such you need to loop through them and test individually before animating, if necesssary:
$("[data-open-sidenav]").on("click", e => {
let $target = $(`#${$(e.target).data("open-sidenav")}`);
$target.animate({ left: 0 }, 300);
});
$(document).on("click", () => {
$('.sidenav').each((i, el) => {
let $el = $(el);
if (parseInt($el.css("left")) === 0) {
$el.animate({ left: "-400px" }, 300, "linear");
}
});
});
$(".sidenav").on("click", e => e.stopPropagation());
.sidenav {
height: 100%;
width: 400px;
position: fixed;
z-index: 1;
top: 0;
left: -400px;
background-color: #fff;
border-right: 1px solid #gray;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav li a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blue" data-open-sidenav="leftsn">Open Left Sidenav</button>
<button class="blue" data-open-sidenav="rightsn">Open Right Sidenav</button>
<div id="rightsn" class="sidenav right">
<li>Right Sidenav</li>
</div>
<div id="leftsn" class="sidenav">
<li>Left Sidenav</li>
</div>
You could use this jQuery Plugin to archive this behaviour. Its a plugin which allows you to set Clickout-Events to Elements.
https://www.jqueryscript.net/slider/Simple-jQuery-Click-Outside-Plugin-clickout-js.html
The below solution works, all I have done is added a event.stopPropagation to the button clicks on the sidenav buttons, and removed the check in your hide function.
I think the issue was that the function that was checking the value of left was only checking the first incidence of the sidenav that it found - i.e. the right sidenav. Thats why it worked for the right but not the left.
Let me know if there was something else.
$("[data-open-sidenav]").on("click", function () {
console.log($(`#${$(this).data("open-sidenav")}`));
// Stop the event propogation so that the sidenav doesnt automatically close
event.stopPropagation();
if (
$(this).data("open-sidenav").length > 0 &&
$(`#${$(this).data("open-sidenav")}`).length
) {
$(`#${$(this).data("open-sidenav")}`).animate(
{
left: "0",
},
300
);
}
});
$(".sidenav").on("click", function (event) {
event.stopPropagation();
});
$(window).on("click", function () {
// If there is any click (that is not stopped by the event.stopPropagations)
// Hide any sidenav
$(".sidenav").animate(
{
left: "-400px",
},
300,
"linear"
);
});
.sidenav {
height: 100%;
width: 400px;
position: fixed;
z-index: 1;
top: 0;
left: -400px;
background-color: #fff;
border-right: 1px solid #gray;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav li a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blue" data-open-sidenav="leftsn">Open Left Sidenav</button>
<button class="blue" data-open-sidenav="rightsn">Open Right Sidenav</button>
<div id="rightsn" class="sidenav right">
<li>Right Sidenav</li>
</div>
<div id="leftsn" class="sidenav">
<li>Left Sidenav</li>
</div>
Related
I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>
Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
I'd like to have a button group with buttons where when the user hovers over them, more content slides in within the button using jQuery's .show("slide", {direction: 'right'}). As you can see in the Fiddle, I have it partly working, but when hovering over the button, the button immediately grows to account for the space where the text will slide to when it's done. Is there any way to have the width of the button follow the width of the sliding element inside it?
Fiddle: https://jsfiddle.net/k7ypusdq/1/
$(document).ready(function() {
$("#new-hidden").hide();
$("#new-button").hover(function() {
$("#new-hidden").show("slide", {
direction: 'right'
}, 300);
}, function() {
$("#new-hidden").hide("slide", {
direction: 'right'
});
});
});
#import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
background-color: #339999;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-button {}
.button-group {
float: right;
}
.button-group a,
button {
background-color: #9fc;
color: #acc;
font-family: 'Passion One', cursive;
font-size: 24pt;
padding: 10px;
border: 1px solid #3a8;
border-bottom-width: 4px;
float: left;
width: auto;
}
.button-group button:first-child {
border-radius: 10px 0px 0px 10px;
}
.button-group button:last-child {
border-radius: 0px 10px 10px 0px;
}
.button-group:after {
content: "";
clear: both;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<html>
<body>
<div class="button-group">
<button id="new-button">
<div style="float: left">Hello!</div>
<span id="new-hidden" style="overflow: hidden;">
I'm here too!
</span>
</button>
<button>Middle</button>
<button>Other Stuff</button>
</div>
</body>
</html>
You could simplify it by just animating the width and preventing text wrap:
<html>
<body>
<div class="button-group">
<button id="new-button" style="text-align:left;text-wrap:none;overflow:hidden;width:100px;height:60px;line-height:40px">
Hello! I'm here too
</button>
<button>Middle</button>
<button>Other Stuff</button>
</div>
</body>
</html>
$(document).ready(function(){
$("#new-hidden").hide();
$("#new-button").hover(function(){
$("#new-button").animate({"width": 250}, 300);
}, function(){
$("#new-button").animate({"width": 100}, 300);
});
});
https://jsfiddle.net/k7ypusdq/42/
If you are looking for a dynamic approach that will get the width of any text you add without having to set a fixed width, you can do the following.
$(document).ready(function() {
// Store each hidden elements width within a data-width attribute.
// Set hidden elements width to zero.
$('.btn-with-text .hidden').each(function() {
$(this).data('width', $(this).outerWidth());
$(this).css({'width': 0});
})
$('.btn-with-text').hover(function() {
var hiddenBtn = $(this).find('.hidden');
// On HoverIn apply and animate the stored data-width and apply left margin
hiddenBtn.animate({
marginLeft: 10,
width: hiddenBtn.data('width')
}, 300);
}, function() {
// On HoverOut set width and margin back to zero.
$(this).find('.hidden').animate({
marginLeft: 0,
width: 0
}, 300);
});
});
#import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
background-color: #339999;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-button {}
.button-group {
float: right;
}
.button-group a,
button {
background-color: #9fc;
color: #acc;
font-family: 'Passion One', cursive;
font-size: 24pt;
padding: 10px;
border: 1px solid #3a8;
border-bottom-width: 4px;
float: left;
width: auto;
}
.button-group button:first-child {
border-radius: 10px 0px 0px 10px;
}
.button-group button:last-child {
border-radius: 0px 10px 10px 0px;
}
.button-group:after {
content: "";
clear: both;
display: table;
}
/*
Add this CSS
*/
button {
overflow: hidden;
position: relative;
}
button .not-hidden {
display: inline-block;
float: left;
}
button .hidden {
overflow: hidden;
white-space: nowrap;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div class="button-group">
<button class="button btn-with-text">
<span class="not-hidden">Hello!</span>
<span class="hidden">
I'm here too!
</span>
</button>
<button class="button btn-with-text">
<span class="not-hidden">Middle</span>
<span class="hidden">
I'm Another One!
</span>
</button>
<button class="button">Other Stuff</button>
</div>
I'm making a single page style website and after scrolling 1 px has been scrolled (i.e. the homepage has been passed) I want the navigation bar to appear and stay fixed at the top.
I've tried the .scroll() jQuery and I'm having no luck.
HTML:
<div id="navbar">
<div id="nav-container">
<img id="logonavbar" src="#">
<a id="ABTUS" href="#">ABOUT US</a>
<a id="SRVCS" href="#">SERVICES</a>
<a id="PRTFLO" href="#">PORTFOLIO</a>
<a id="CNTCT" href="#">CONTACT</a>
</div>
</div>
CSS:
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
overflow: hidden;
z-index: 10;
display: none;
}
#nav-container {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
}
#logonavbar {
float: left;
margin: 0 auto;
width: 125px;
padding: 10px 0 0 0;
}
#nav-container a {
float: right;
display: block;
padding: 25px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", calibri,sans-serif;
font-size: 20px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
jQuery:
$(document).scroll(function() {
if ($document.scrollTop() >= 50) {
$('#nav-container').css('display': 'inline', 'position': 'fixed');
}
});
Here I have made a simple example of a element that sticks to the top of the page after you scroll over it. Maybe it can help you as well!
http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/
Here is the source of this example!
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script>
$(function(){
var pos = $("#topMenuX").offset().top,
win = $(window);
win.on("scroll", function() {
win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");
});
});
</script>
<style>
body {
padding:0;
margin:0px;
}
#topMenuX {
background: #666;
padding: 20px;
height:45px;
color: #fff;
}
#topMenuX .insideMenu li {
float:left;
list-style:none;
}
</style>
</head>
<body>
<div id="topMenuX">
<ul class="insideMenu">
<li>CoreXDesigns</li>
<li>Simple Sticky Menu Example</li>
</ul>
</div>
</body>
</html>
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