Javascript accordion menu open when page loads - javascript

I am extremely new to coding, especially Javascript. I recently found a tutorial that I got to work for an accordion menu, but I am unable to understand how to get the drop downs closed when the page loads. Currently, all of the drop downs are open when the page loads. I tried looking at other solutions but I just don't understand the code fully yet. Thank you so much!
(function($){
$(document).ready(function(){
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
});
})(jQuery);

Replace
$('#cssmenu li.active').addClass('open').children('ul').show();
on line 4 with
$('#cssmenu li.active').removeClass('open').children('ul').hide();

You triggered expand action only on click. Just must set the first state on DOM elements.
<div style="display: none;"></div>
Or by default controled "closed" class name instead of "open"

Related

Jquery. Hide other elements, except this

I‘m using Pollate Template for creating polls. There is a list of user's created Polls, after clicking 3 dots (menu icon), the dropdown list shows up with the option to delete this poll. If the submenu is shown and you click anywhere on the screen it hiding.
But I found a bug, that if you clicking on another sub-menu icon it not hiding other sub-menus (look at the image below).
It should be hidden when clicking anywhere, even if it's a sub-menu icon of another entry.
There is HTML structure:
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
After clicking a - dropdown shows up.
There is JQuery:
$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
$(prtclick).livequery('click', function(){
var ul = $(this).parent();
if( ul.find(prtlist).hasClass('open') ){
ul.find(prtlist).removeClass('open');
$(this).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
} else {
ul.find(prtlist).addClass('open');
$(this).addClass('active');
if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
}
return false;
});
$("html, body").livequery('click', function(){
$(prtclick).parent().find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
}
prtclick -> .pl-user-options
I think that this function $("html, body").livequery('click', function(){... should be edited, but can't achieve it successfully. I've tried in many ways but failed.
One of my tries was:
$(prtclick).click(function(evt){
$(prtclick).find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
But now it not showing sub-menu at all. I need to make an exception for the current entry. Have you any ideas? Thank you.
Before you check for .open class, you can toggle off all other ul.dropdowns.
$(this).closest('.row').siblings('.row').removeClass('active')
.find('ul.dropdown').removeClass('open');
Get current clicked a main parent which has 'row' class,
get its siblings, remove 'active' class of them,
get all ul.dropdowns inside those siblings and remove 'open' class of those uls

Toggle Drop Down Links Not Working

I am using the following jquery to create a drop down toggle effect on my side menu (link: http://wp.gattoweb.com/gattotestfour/)
jQuery(document).ready(function(){
jQuery('.site-navigation ul ul').hide();
if(jQuery('.menu-item-has-children').length > 0) {
jQuery('.menu-item-has-children').click(function(event) {
jQuery(this).addClass('toggled')
if(jQuery('.menu-item-has-children').hasClass('toggled'))
{
jQuery(this).children('ul').toggle();
}
return false;
});
}
});
This seems to be doing the job for the toggle effect but when I try to click on one of the drop down links, the menu disappears and doesn't go to the linked page.
Try this as a full replacement for your script:
$(document).ready(function(){
$( '.sub-menu' ).hide();
$( '.menu-item-has-children' ).click( function() {
var $this = $( this );
$this.find('.sub-menu').slideToggle();
$this.find('.sub-menu').click( function(e) {
e.stopPropagation();
});
});
});
* Edited *
Also, I would add he following to CSS and remove the first line of this script:
.sub-menu {
display: none;
}
If it's not there, it's fine.
Lastly, there is the issue of design decisions. Do you want "Weddings" to trigger the sub-menu or go to the weddings page? The way it is now, it will load the sub-menu for a split second while the weddings page loads, but your visitor will never really have the opportunity to see your engagement portfolio.
Maybe try using a custom link of "Portfolios" with a link URL in the wordpress admin of "#" and move weddings to a child position under that.
Here's a fiddle of the fix: https://jsfiddle.net/cr46nekL/1/

jquery not resetting menu navigation trigger

Currently I have this script that allows a button to open and close a menu whilst also changing it's class to do a little animation state change depending on open/close,... simple but effective.....
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if($navToggle.hasClass('active')){
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else{
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
within the menu is a list with some options (standard) and when one is clicked it performs the following script based on its tag in the list... here's the html and js for that....
html
<li>
<i class="fa fa-briefcase"></i>Who are Musability?
</li>
JS
$('.fa-briefcase').parent().on('click', function () {
$("#colorscreen").remove();
$( '#menu' ).multilevelpushmenu( 'collapse' );
$("body").append('<div id="colorscreen" class="animated"></div>');
$("#colorscreen").addClass("fadeInUpBig");
$('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.1)');
$(".tile-area-main").css({width: "720px"}).load("content.html");
$('.nav-toggle').removeClass('active');
$(this).addClass('active');
});
all functions work great separately but when i introduce the functions for the button click fa-briefcase it wont allow me to open the menu again why is this ?
... on another note (therefore probably a new question at another time) this code is repetitive for all buttons and wonder if there is a way of standardizing the stuff that is repeated into one big function ? not sure about how i would go about it but it isn't the focus of this question , although any advice greatly recieved.
What does your content.html file contain?
Because if it contains other JavaScript it could be messing with it.
i.e.
Instead of $(".tile-area-main").load("content.html");
Try $(".tile-area-main").load("content.html#div");
Where #div is the div with the contents you want to load() in
EDIT: Just noticed your comments, seems like you've fixed it yourself, but glad my method worked :)

Remove Subnav Dropdown from WordPress Menu with Jquery

Ive wrote some Jquery to work on tables & Desktop which drops down with a hover or a click - it almost works great except it doesn't return (go back up) once dropped down.
Would it be correct to use a mouse leave on the following code to change display to hidden?
Here is the code I have wrote:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(
function(){$(this).click();
}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide();
}
$('ul.sub-menu', this).show();
}
);
})
I also have this in Codepen to show better:
http://codepen.io/anon/pen/jPbJMJ
Thank you
I managed to do this by changing the following:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide(); }
$('ul.sub-menu', this).show();
$("#menu-main-menu").mouseleave(function(){
$("ul.sub-menu").hide();
});
}
);
})
As you can see I used the mouseleave function in Jquery to remove the ul.sub-menu if the #menu-main-menu div was not selected with the mouse.
I hope this helps anyone trying to write a WordPress dropdown Sub navigation menu

jQuery - How do I have an accordian li open when I am in a specific path?

I have built a simple accordian style menu. It works, but I would like it to have a specific section toggled open when in a path related to that menu. So if I would be in the "Mens" part of the clothing store, the Mens section of the menu with the child would be visible or toggled. Right now you can click and toggle open each section, but they are all closed when the page first loads. The website section I am referring to is here: http://bemidjisports.designangler.com/men The menu is on the left side.
I assume it has something to do with the jQuery .toggle() method, but I am not sure. Could someone give me an example of this based on the code below?
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(e) {
e.preventDefault();
$(this).siblings("ul").slideToggle("fast");
});
});
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(f) {
var href = this.href;
window.location = href;
});
});
$(document).ready(function() {
$("#nav_1489829 li.selected").ready(function(g) {
$("li.selected").toggle();
});
});
Try
$("#nav_1489829 li.selected a").trigger('click');

Categories