I'm developing an Android app, and my intention is to be able to publish it for Android 2.2+ at least. Currently, I'm limited to Android 4.0+ because of the WebView control being a mess.
The app is largely HTML+CSS+JS+jQuery based.
div.appList shows a list of apps, and when clicked the app should launch. Only there's some trouble with this; For the list to be scrollable, I have to add overflow: scroll; to its parent. This works fine in Android 3.0+. In Android 2.x the list is still not scrollable.
I said it worked fine in Android 3.0? Well, the scrolling does. Now the problem is that it doesn't register clicks. If the user taps an item in the list, the click event simply doesn't get triggered, because, I'm guessing, it's registered as the user scrolling through the list. Making the list unscrollable again makes the items clickable, but then again, the list is useless because you can only access the top few items.
Everything works fine in Android 4.0+
Any help would be hugely appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="loadingScreen">
</div>
<div id="desktop">
<div class="unity panel">
</div>
<div class="unity launcher">
<div class="launcherIcon bfb">
<img src="img/unity/launcher.bfb.png" alt="Dash Home" />
</div>
<div class="launcherApps iScroll" id="launcherApps">
</div>
<div class="launcherIcon launchTrash">
<img src="img/apps/trash.icon.png" alt="Rubbish Bin" />
</div>
</div>
<div class="window">
<div class="windowClose">
</div>
<div class="windowContent">
<div class="windowPreferences">
<p>Nothing to be seen here, yet</p>
</div>
</div>
</div>
<div class="unity dash">
<div class="dashContent">
<div class="dashApps dashPage iScroll" id="dashApps">
<div class="appList"></div>
</div>
<div class="dashFiles dashPage iScroll" id="dashFiles">
<div class="fileList"></div>
</div>
</div>
<div class="dashRibbon">
<img src="img/unity/apps.png" alt="Applications" class="activeRibbonItem ribbonApps" />
<!--<img src="img/unity/files.png" alt="Files" class="ribbonFiles" />-->
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
font-family: 'Ubuntu', 'Droid Sans';
margin: 0px;
padding: 0px;
overflow: hidden;
background: rgb(43,0,30);
}
/*# Loading screen #*/
div#loadingScreen
{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
text-align: center;
background: rgb(43,0,30) url(img/ubuntuLogo.png) center center no-repeat;
color: white;
z-index: 49;
}
/*# Desktop #*/
div#desktop
{
display: none;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgb(43,0,30) url(img/wallpaper/wartyFinal.jpg);
background-position: center center;
background-size: cover;
}
div.unity.panel
{
display: none;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 24px;
background: rgb(69,68,64) url(img/unity/panel.background.jpg);
background-repeat: repeat-x;
}
div.unity.panel.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
border-bottom: 1px solid #504E4F;
}
div.unity.launcher
{
display: none;
position: absolute;
top: 24px;
left: 0px;
bottom: 0px;
width: 0px; /* Animates to 64px */
background: transparent url(img/unity/launcher.background.png);
border-right: 1px solid #504E4F;
padding: 3px 0px 55px 0px;
}
div.unity.launcher.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
}
div.launcherIcon
{
display: none;
width: 52px;
height: 52px;
margin: 4px 6px 4px 6px;
border-radius: 5px;
background: transparent url(img/unity/launcher.iconbg.png);
background-position: center;
background-size: cover;
}
div.unity.launcherIcon.dashOpened
{
background: grey !important;
opacity: 0.8;
}
div.launcherIcon.bfb
{
background-image: none;
border-radius: 0px;
}
div.launcherIcon.bfb img
{
width: 52px;
height: 52px;
margin: 0px;
}
div.launcherIcon img
{
width: 46px;
height: 46px;
margin: 3px;
}
div.launcherIcon.launchFirefox
{
background-color: rgb(247,192,48);
}
div.launcherIcon.launchTrash
{
position: absolute;
bottom: 3px;
background-color: #303030;
}
div.window
{
display: none;
position: absolute;
top: 24px;
left: 64px;
right: 0px;
bottom: 0px;
background: rgb(242,241,239);
color: black;
}
div.windowClose
{
position: fixed;
left: 0px;
top: 0px;
width: 64px;
height: 24px;
text-align: center;
background: url(img/window/close.png) center center no-repeat;
}
div.dash
{
display: none;
position: absolute;
left: 64px;
top: 24px;
bottom: 0px;
right: 0px;
background: transparent url(img/unity/dashOpened.png);
padding: 0px 12px 48px 12px;
color: white;
overflow: scroll;
}
div.dash.dashOpened
{
display: block;
}
div.dash *:link
{
color: white;
text-decoration: none;
text-shadow: 0px 0px 2px white;
}
div.dash ul li
{
padding: 5px;
}
/*# Applications #*/
div.appWindow
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
JavaScript
var bootscreenDelay = 500; // 2500 //
var appOpened = false;
var dashOpened = false;
$(document).ready
(
function ()
{
$('div#loadingScreen').delay (bootscreenDelay).fadeOut (800);
$('div#desktop').delay (bootscreenDelay + 300).fadeIn (600,
function ()
{
$('div.unity.panel').slideDown (400,
function ()
{
$('div.unity.launcher').css ('display', 'block').animate ( { width: 64 }, 600,
function ()
{
$('div.launcherIcon').each
(
function (i)
{
$(this).delay (i * 200).slideDown (400);
}
);
}
);
}
);
}
);
$('div.windowClose').click
(
function ()
{
$('div.appFirefox .appFirefoxBrowser').fadeOut (400,
function ()
{
appFirefoxNavigate ('http://start.ubuntu.com/');
}
);
$('div.appWindow.appFirefox').fadeOut (800);
$('div.window').delay (200).fadeOut (800);
appOpened = false;
}
);
/*# Dash #*/
$('div.launcherIcon.bfb').click
(
function ()
{
if (! dashOpened)
openDash ();
else
closeDash ();
}
);
/*# Trash #*/
$('div.launcherIcon.launchTrash').click
(
function ()
{
closeEverything ();
android.openInBrowser ('http://www.dafk.net/what/');
}
);
}
);
function closeEverything ()
{
$('div.windowClose').trigger ('click');
closeDash ();
}
function openDash ()
{
$('*').addClass ('dashOpened');
dashOpened = true;
var appList = android.getApplicationList ();
var pkgMan = android.getPackageManager ();
var strAppList = '<ul>';
for (var i = 0; i < appList.size (); i++)
{
var appLabel = android.getApplicationLabel (appList.get (i));
strAppList += '<li onclick="launchApp (' + i + ')">' + appLabel + '</li>';
}
strAppList += '</ul>';
$('div.appList').html (strAppList);
}
function closeDash ()
{
$('*').removeClass ('dashOpened');
dashOpened = false;
}
function launchApp (i)
{
android.launchAppFromList (i);
}
Anything that helps me get it working on an older version is appreciated. The goal is Android 2.x, but if you can help me make it work on 3.2+, I'm already very happy.
overflow:scroll|auto dowsn't work properly on Android 2.X devices.
This css rule equals to overflow:hidden :)
You can't fix it but you can use plugins to avoid this behaviour e.g. http://cubiq.org/iscroll-4
Related
I am trying to learn coding in my freetime and have run into an issue. I am trying to have 'contact info' to be a on hover on profile picture so that it shows a way to contact me via phone, email, and shows my name. I'm hoping someone can help with this please.
Cut most of the HTML code in the process to allow post
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='Profile.jpg' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
You've missed ; after top: 30%; in CSS #contactInfo class
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%; /* missed ; */
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h50-n-l50-sg-rj' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this?
Here is my Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
Here is the full code:
https://jsfiddle.net/lollz4/dh1kLh8L/
P.S. I'm new here so sorry if I'm doing anything wrong.
Add an additional wrapper around your menu and check for the hover state on that element instead:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>
I'm trying to do a menu that hides on the left side and when we click on the button it opens or closes. I have the following code but the menu just opens, the code for closing isn't working, someone have a clue about what I did wrong?
var menu = function() {
/* Open Menu*/
$('.js_open_seta').click(function() {
$('.js_menu').animate({
left: "0px"
}, 200);
$(".js_open_seta").addClass("js_close_seta");
$(".js_open_seta").removeClass("js_open_seta");
});
/* Close Menu*/
$('.js_close_seta').click(function() {
$('.js_menu').animate({
left: "-240px"
}, 200);
$(".js_close_seta").addClass("js_open_seta");
$(".js_close_seta").removeClass("js_close_seta");
});
};
$(document).ready(menu);
body{
background: url("imagens/exp.jpg");
background-repeat: no-repeat;
background-size: 1280px 800px;
padding: 0;
margin: 0;
border: 0;
}
.js_menu{
background: #4d4d4d;
top: 0px;
left: -240px;
position: fixed;
width: 310px;
height: 100%;
text-align: center;
font-family: 'Lato', sans-serif;
color: #ffffff;
z-index: 50;
padding: 0;
margin: 0;
border: 0;
}
#js_exp, #js_open{
float: left;
background: #4d4d4d;
height: 100%;
}
#js_exp{
width: 240px;
}
#js_open{
border-left: #ff0000;
width: 70px;
text-align: center;
vertical-align: middle;
}
#js_seta{
margin-top: 325px;
width: 70px;
height: 70px;
}
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="js_menu">
<section id="js_exp">
SMPC
NGC Informática(2015)
NGC Informática (2015-2016)
</section>
<section id="js_open">
<img src="http://vignette1.wikia.nocookie.net/ladygaga/images/4/40/Seta.png/revision/latest?cb=20110522223038&path-prefix=pt" class="js_open_seta" id="js_seta"/>
</section>
</nav>
</div>
var menu = function() {
$('#js_seta').click(function() {
var check = $("#js_seta").hasClass("js_open_seta");
if(check) {
$('.js_menu').animate({
left: "0px"
}, 200);
$(".js_open_seta").addClass("js_close_seta");
$(".js_open_seta").removeClass("js_open_seta");
} else {
$('.js_menu').animate({
left: "-240px"
}, 200);
$(".js_close_seta").addClass("js_open_seta");
$(".js_close_seta").removeClass("js_close_seta");
}
});
};
$(document).ready(menu);
This works
<style type = "text/css">
.privacycheck2:hover {
background-color: #E60000;
width: 100px;
left: 860px;
position: relative;
}
.privacycheck2 {
position: relative;
top: 225px;
left: 852px;
font-family: Helvetica Neue;
font-size: 19px;
color: white;
}
.privacycheck1 {
position: relative;
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
</style>
<body>
<div class = "privacycheck2:hover">This information is private</div>
<div class = "privacycheck1"></div>
<div class = "privacycheck2">i</div>
</body>
How do I make so if you hover over privacycheck1, it will show a box next to privacycheck1 that says "This information is private"
The code I wrote also makes it when you hover over privacycheck1, it would make privacycheck2 (the "I") would move and I don't want that to happen.
If I understand your question correctly, you could do something like this, although you would have to rewrite your HTML.
.privacycheck1 {
position: relative;
background-color: #E60000;
width: 24px;
height: 24px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
content: 'i';
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
}
<div class="privacycheck1"></div>
If you are using Boot Strap, you can use built in functionality of tool-tip.
Otherwise
Try this :
<body>
<style type = "text/css">
.privacycheck1 {
position: relative;
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.hoverEle {
display:none;
}
.privacycheck1:hover .hoverEle {
display:block;
margin-left: 50px;
}
</style>
<div class = "privacycheck1">
<div class="hoverEle">This information is private</div>
</div>
<body>
You can mix up CSS and javascript to do this.
<html>
<style type = "text/css">
.privacycheck1 {
top: 265px;
background-color: #E60000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
/// set display none
display:none;
}
#privacycheck2_hover{
position: absolute;
margin-left:30px;
display:none; // initially set its display to none
}
</style>
<body>
<div id = 'privacycheck2_hover'>This information is private</div>
<div class = "privacycheck1" onMouseOver="showOn()" onMouseOut="showOff()"></div>
<script>
// when mouse out set css display mode to block
function showOn(){
document.getElementById("privacycheck2_hover").style.display = 'block';
}
// when mouse over set css display mode off
function showOff(){
document.getElementById("privacycheck2_hover").style.display = 'none';
}
</script>
</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