Open accordion on load with active class - javascript

I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.
JS:
$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
if ($(this).next().is(':visible')) {
//Collapse
$(this).next().slideToggle('fast');
$(this).removeClass('active');
// $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
} else {
//Expand
$(this).next().slideToggle('fast');
$(this).siblings().removeClass('active');
$(this).addClass('active');
//hide other panels
$(".servicesubli").not($(this).next()).slideUp('fast');
//$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
}
});
});
HTML:
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
<span class="subitem">Web Design,
<br>
Multimedia & Email</span><span class="fa1 fa-globe"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="domains.php">
<li>
Domain Registration
</li>
</a>
<a href="webdesign.php">
<li>
Web Design & Development
</li>
</a>
<a href="webhosting.php">
<li>
Web Hosting
</li>
</a>
<a href="email.php">
<li>
Managed Email Systems
</li>
</a>
</ul>
</div>
<li class="servicesubitem">
<span class="subitem">Vessel
<br>
Security</span><span class="fa1 fa-lock"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="tracking.php">
<li>
Yacht Tracking
</li>
</a>
<a href="ssas.php">
<li>
SSAS
</li>
</a>
<a href="#">
<li>
SAT C
</li>
</a>
</ul>
</div>
</div>
CSS:
* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }
As you can see the accordion works to click on and the active class (which is set manually for this demo) is there I just want it so that the correct accordion part is toggled when the page is loaded. Thanks in advance.

To recycle your logic, You can just add your .active class to whichever element you wish, then search for .servicesubli.active on ready. Observe the following...
<div class="servicesubli active">
$(function() {
[...]
$('.servicesubli.active').slideToggle('fast');
});
JSFiddle Link - demo
Per comments, if you wish to target off servicesubitem.active, just modify to the following...
$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');
JSFiddle Link - demo - .servicesubitem.active selector

Well you just need to trigger the click event once the page is loaded like below:
$('.servicesub').find('.active').trigger( "click" );
See the jsfiddle here: http://jsfiddle.net/beroza/a1mbgyqx/

Related

Submenu levels do not work properly Vanilla JS

I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}

List item active hover effect

I have a hover effect on all my list items and active hover effect on my top list item "testimonials". I would like the active hover effect on "testimonials" to de-activate when hovering over the other list items. this way only one hover effect will be active at one time but the default "testimonials" link will always be active if no other hover is in effect.
I understand this may require some jquery? Any and all help would be greatly appreciated.
here is my code, HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<ul>
<li>
<a class="testimonials" href="#">
<h1>testimonials</h1>
<h2>We love our</h2>
<div class="selector"><img scr="img/logo.png"></img></div>
</a>
</li>
<li>
<a class="instructions" href="#">
<h1>instructions</h1>
<h2>For your information</h2>
</a>
</li>
<li>
<a class="Benefits" href="#">
<h1>benefits</h1>
<h2>A choice</h2>
</a>
</li>
<li>
<a class="Top-Recipe" href="#">
<h1>top</h1>
<h2>Recommendation</h2>
</a>
</li>
<li>
<a class="Affiliations" href="#">
<h1>affiliations</h1>
<h2>Valued Retailers</h2>
</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
}
.wrapper
{
position: fixed;
width: 50%;
height: 100vh;
padding-left: 40px;
padding-right: 40px;
background: #fff;
}
.wrapper ul
{
position: absolute;
top: 20%;
left: 23%;
right: 10%;
}
.wrapper ul li
{
list-style: none;
margin-top: 10%;
}
.wrapper ul li a
{
text-decoration: none;
color: #011933;
}
.wrapper ul li a:hover
{
text-decoration: none;
}
.wrapper ul li a h1
{
font-size: 28px;
}
.wrapper ul li a h1:hover
{
font-size: 28px;
color: #8a6b0c;
}
.wrapper .testimonials
{
color: #8a6b0c;
}
.wrapper ul li a h2
{
font-size: 14px;
margin-left: 20px;
opacity: .6;
}
.wrapper ul li a h1, h2
{
width: 50%;
height: 60px;
padding: 0;
display: inline;
}
Instead of setting the color on the .testimonials class, you could change this to be an 'active' class and have it work on the element and childs (in this case the text). Then use jQuery/JavaScript to control the toggling of the active class.
So I've done this to the CSS:
.wrapper .active *
{
color: #8a6b0c;
}
Instead of:
.wrapper .testimonials
{
color: #8a6b0c;
}
And then controlling the toggling with jQuery like so:
$( "li" ).hover(
function() {
if ($('.testimonials')[0].classList.contains('active')) {
$('.testimonials').toggleClass('active');
}
$( this ).toggleClass('active');
},
function() {
$( this ).toggleClass('active');
if (!$('.testimonials')[0].classList.contains('active')) {
$('.testimonials').addClass('active');
}
}
);
And I also added the active class into the HTML on the testimonials element:
<a class="testimonials active" href="#">
Working fiddle: http://jsfiddle.net/f9pqsd8v/10/

Hidden nested navigation is shown before hover

I'm using a list as a navigation and CSS to design a horizontal nav for the main pages/ vertical nav for the subpages of "Diet".
I apply JavaScript to hide/ show the subpage links in the navigation. It works, but when the page is loaded the 3 links are shown - after I hovered over the item "Diet" they are hidden. If I hover again, then it is shown again and works as it should.
Basically, how can I make sure that the three links are hidden from the beginning?
Thank you in advance!
$(document).ready(function() {
$("nav li:has(ul)").hover(function() {
$(this).find("ul").slideDown();
}, function() {
$(this).find("ul").hide();
});
});
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
<li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
<li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
</ul>
</li>
</ul>
</nav>
Just add a display: none to the submenu:
.navListElmnt > .navUnordList {
display:none;
}
If I can express a personal note, these class names are bad, difficult to remember and to write.
$(document).ready(
function()
{
$("nav li:has(ul)").hover(
function()
{
$(this).find("ul").slideDown();
}
,
function()
{
$(this).find("ul").hide();
});
}
);
.navUnordList{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}
.navListElmnt{
float:left;
position:right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert{
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top:0.1em;
}
.navListElmnt > .navUnordList {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert"><a href="page3-1.html">Food and Drink </li>
<li class="navListElmntVert"><a href="page3-2.html">Balanced Diet</li>
<li class="navListElmntVert"><a href="page3-3.html">Nutrition</li>
</ul>
</li>
</ul>
</nav>
To hide the options to start with you can set them as display: none in CSS.
Also note that the JS is redundant, as you can have the same logic in CSS, which is preferred as it's hardware accelerated. Try this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navUnordList li ul li {
display: none;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmnt:hover > ul > li {
display: block;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">
Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink</li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
You can actually have a CSS only solution for this. Keep height 0px by default and make it auto on hover like this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
.navListElmnt>.navUnordList {
height: 0px;
}
.navListElmnt:hover>.navUnordList {
height: auto;
}
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink </li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>
Note: This does take away the slide down animation cos of height:auto
But you can have animated version too, if you are ready to measure how much height each submenu takes like this:
.navUnordList {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navListElmnt {
float: left;
position: right;
font-family: Verdana, sans-serif;
font-size: 75%;
}
.navListElmntVert {
list-style: none;
text-align: left;
font-size: 0.8em;
margin: 0;
margin-bottom: 0.1em;
margin-top: 0.1em;
}
.navListElmnt>.navUnordList {
height: 0px;
transition: all 0.2s ease;
}
.navListElmnt:hover>.navUnordList {
height: 50px;
}
<nav>
<ul class="navUnordList">
<li class="navListElmnt">Example</li>
<li class="navListElmnt">Diet
<ul class="navUnordList">
<li class="navListElmntVert">Food and Drink </li>
<li class="navListElmntVert">Balanced Diet</li>
<li class="navListElmntVert">Nutrition</li>
</ul>
</li>
</ul>
</nav>

Nav with dropdown menu's is very glitchy

I'm working on a site to learn more about javascript but I dont know how to fix this. If you look at the fiddlle and try the nav you're self you'll know what im talking about(if not, try hover on Multiplier and try to click Quadruple).
Also the .slideUp() seems glitch and I don't know why. I want it to look like it slidesdown from the nav and slides back up into the nav.
So how would you fix these 2 issues?
https://jsfiddle.net/26L2h6zg/
// Drop down menu
$(".shopDrop").hide();
$(".shop ul li").hover(function(){
$(this).find(".shopDrop").slideDown();
}, function(){
$(this).find(".shopDrop").slideUp();
});
// Drop down menu info
$(".shopDrop a").hover(function(){
$(this).next(".shopHoverInfo").fadeIn("slow");
}, function(){
$(this).next(".shopHoverInfo").fadeOut("slow");
});
// Drop down menu
$(".shopDrop").hide();
$(".shop ul li").hover(function(){
$(this).find(".shopDrop").stop(true).slideDown();
}, function(){
$(this).find(".shopDrop").stop(true).slideUp();
});
// Drop down menu info
$(".shopDrop a").hover(function(){
//$(this).stop(true, true);
$(this).next().stop(true).fadeIn("slow");
}, function(){
//$(this).stop(true);
$(this).next().stop(true).fadeOut("slow");
});
nav.shop {
width: 100%;
height: 100px;
background: #182024;
margin: 0;
}
nav.shop ul {
width: 960px;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
nav.shop ul li {
display: inline-block;
vertical-align: top;
padding-left: 25px;
}
nav.shop ul li h1 {
font-size: 35px;
margin-right: 20px;
}
nav.shop ul li h2 {
color: #fff;
text-decoration: none;
font-size: 35px;
margin-left: 10px;
}
nav.shop ul li a {
color: #fff;
text-decoration: none;
font-size: 35px;
padding-bottom: 10px;
padding-top: 10px;
display: block;
}
.shopDrop {
position: absolute;
background: #182024;
padding: 30px 10px 0 10px;
margin-top: -30px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
nav.shop ul li div a {font-size: 20px;}
nav.shop ul li div span {font-size: 15px;}
#shopMultiplier{border-bottom: 5px solid #CA2525;}
#shopAutoclicker{border-bottom: 5px solid #2596CA;}
#shopFarms{border-bottom: 5px solid #CAB125;}
#shopSkills{border-bottom: 5px solid #35CA25;}
.shopHoverInfo {
display: none;
width: 150px;
background: #1C262A;
text-align: center;
padding: 0;
color: #fff;
}
.shopHoverInfo h3 {
font-size: 17px;
background: #CA2525;
margin: 0;
padding: 5px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.shopHoverInfo h4 {
font-size: 17px;
margin: 0;
background: #EED634;
}
.shopHoverInfo p {
font-size: 15px;
}
<nav class="shop">
<ul>
<li><h1>SHOP</h1></li>
<li>
<h2 href="#" id="shopMultiplier">Multiplier</h2>
<div class="shopDrop">
Double knowledge <span>☆</span>
<div class="shopHoverInfo">
<h3>Double Knowledge</h3>
<h4>Price: <span id="shopDoublePrice"></span> knowledge</h4>
<p>When you click you get 2x knowledge</p>
</div>
Triple knowledge <span>☆</span>
<div class="shopHoverInfo">
<h3>Triple Knowledge</h3>
<h4>Price: <span id="shopTriplePrice"></span> knowledge</h4>
<p>When you click you get 3x knowledge</p>
</div>
Quadruple knowledge <span>☆</span>
<div class="shopHoverInfo">
<h3>Quadruple Knowledge</h3>
<h4>Price: <span id="shopQuadruplePrice"></span> knowledge</h4>
<p>When you click you get 4x knowledge</p>
</div>
</div>
</li>
<li><h2 href="#" id="shopAutoclicker">Auto-clicker</h2></li>
<li>
<h2 href="#" id="shopFarms">Farms</h2>
<div class="shopDrop">
Simple mind's <span></span>
<div class="shopHoverInfo">
<h3>Simple Mind</h3>
<p>Simple mind farms 1 knowledge each second.</p>
</div>
intelligent mind's <span></span>
<div class="shopHoverInfo">
<h3>Intelligent Mind</h3>
<p>Intelligent mind farms 2 knowledge each second.</p>
</div>
</div>
</li>
<li>
<h2 href="#" id="shopSkills">Skills</h2>
<!-- <div class="shopDrop">
Simple mind's <span></span>
</div> -->
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It would be easier to make HTML according to your needs. Hope this helps.

CSS affecting nav bar and slider

Basically the problem I am having is that I have some CSS that is affecting both my nav bar and slider, because they are both using and essentially the nav bar is working but the slider is being affected.
I am still pretty new to coding so I didn't know what specifically to search online to fix this problem, any help is greatly appreciated.
HTML being affected.
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
<li>
<img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
</ul>
</div>
NAV BAR
<!--section1-->
<section id="top" class="Back to top">
<img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">
<div class="top-bar-container">
<div class="top-bar">
</div>
<nav class="nav-bar">
<ul>
<li>About</li>
<li><a href="#photos" >Gallery</a></li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-container">
<div class="header">
</h3>
<h4>
NAV BAR CSS:
.top-bar-container .top-bar {
width: 800px;
}
.top-bar-container .top-bar .logo {
float: left;
}
.top-bar-container .top-bar .logo span {
color: #27AD60;
}
.top-bar-container .nav-bar {
float: right;
}
.top-bar-container .nav-bar ul li {
list-style-type: none;
display: inline-block;
padding: 21px 27px;
font-size:15px;
}
.top-bar-container .nav-bar ul li a:not(.active) {
text-decoration: none;
color: white;
}
.top-bar-container .nav-bar .active {
color: white;
text-decoration: none;
padding-top:34px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 16px;
color: grey;
text-decoration: none;
position: relative;
}
ul li a:hover, ul li a.selected{
color:white;
}
ul li a.selected:before, ul li a:hover:before {
content: '';
width: 100%;
position: absolute;
top: -19px;
left: 0;
height: 3px;
background: white;
}
h3{
font-size: 121.5%;
line-height: 2.;
font-family: 'PT Sans', sans-serif;
text-align: center;
}
Your issue is that the CSS selectors are not descriptive enough. ul and li will target both HTML sections.
You can change them to classes or ids so that the selectors are more descriptive.
I would recommend reading up on CSS selectors as it will make HTML and CSS a lot easier.

Categories

Resources