Develop Reference

How to collapse a submenu when clicked again

I'm relatively new to JS and I can't figure out how to close a submenu when clicked again (or if anything else is clicked, like the button which makes the menu appear.
With this thread here on Stackoverflow I managed to open the submenu on click on the parent, but how can i close it again by click it again? Other threads that I found by google didn't help me at all...
HTML
<ul id="menu">
<li>Home</li>
<li>In the news
<ul>
<li>Youtube</li>
<li>Blog</li>
</ul>
</li>
<li>Who's Who?
<ul>
<li>Youtube</li>
<li>Tackle Hunger Tackle Hunger</li>
</ul>
</li>
<li>Services Offered</li>
JS
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$('#menu ul').hide('normal');
$(this).next().slideToggle('normal');
});
}
$(document).ready(function() {
initMenu();
});
When I click it again, it closes and then opens up again... Really thanks a lot for helping me with this problem!
Here is also the jsfiddle of the other thread

Simply add an if and check if the next element is hidden.
Without the if, you will trigger hide and show twice by clicking on the same element.
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(function() {
$('#menu ul').hide('normal');
// check if the next element is hidden
if($(this).next().is(":hidden")) {
$(this).next().slideToggle('normal');
}
});
}
$(document).ready(function() {
initMenu();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Home</li>
<li>In the news
<ul>
<li>Youtube</li>
<li>Blog</li>
</ul>
</li>
<li>Who's Who?
<ul>
<li>Youtube</li>
<li>Tackle Hunger Tackle Hunger</li>
</ul>
</li>
<li>Services Offered</li>
</ul>

jQuery click() and on() function

I'm trying to add "active" class to menu when user clicks on the button but for some reason it's not working correctly. They have to click really fast and two times. I've tried both click and on click function but still not working.
$('#menu li').click(function() {
$('#menu li.active').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="menu">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Services
</li>
<li class="nav">Gallery
</li>
<li class="nav">Contact
</li>
</ul>
</div>

you must handle active li after page loaded.Add this at the end of your code:
var curruntLocation = window.location.href;
$('#menu li a').each(function ()
{
var thisHref = $(this).attr('href');
if (curruntLocation.indexOf(thisHref) > 0)
{
$(this).parent().addClass('active');
}
});

The links included in the menu items are reloading the page while clicking and when the page is reloaded, the initial setting comes first. You can use preventDefault() if you'd like to run the function but then, your links won't work.
I suggest you use anchors instead of query string.

Why does my accordion list keep closing?

I've created a side menu that contains accordion list. When I load the page, the accordion list has one section open because it's coded to be active on page load. However if I attempt to open another section... it opens the section but then closes straight away. Can someone tell me where I'm going wrong?
List code:
<ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl">
<ul>
<li class="active">
<h3><span class="icon-dashboard"></span>Group 1</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li>
<h3><span class="icon-tasks"></span>Group 2</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Group 3</h3>
<ul>
<li ng-repeat="card in cards">{{ card.title }}</li>
</ul>
</li>
</ul>
JS:
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})

You must wait until the execution of the slideUp function is completed (by default the duration is 400ms) before you test if the next element is visible or not.
$(document).ready(function(){
$("#accordian h3").click(function(){
//slide up all the link lists
$("#accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
var $elemH3 = $(this);
setTimeout(function() {
if(!$elemH3.next().is(":visible"))
{
$elemH3.next().slideDown();
}
}, 401);
})
})
You can use some CSS to do this easily see this example : http://jsfiddle.net/nx2LkoLd/
You hide all sections but not the active one :
css code
li.active ul {
display:block;
}
li ul {
display: none;
}
The js and html code still the same.
Hope it's clear and will help you resolve your problem.

Default position of accordion is collapsed... put this on the begining of your $(document).ready to expand it.
$('#accordian').collapse({toggle: true});
EDIT:
In your case:
$(document).ready(function(){
$('#accordian').collapse({toggle: true});
});
Or... if you want your accordion expands independent of the ready event you can put this line anywhere in your js file (except inside another function):
$(function () { $('#accordian').collapse({toggle: true}); });
Both will work, but I'm not sure if your own functions are working, so be careful. I'm sorry, no time to test. ;)

how to active parent ul li after page refresh or click on sub menu link

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>

You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>

Slide Toggle automatically open the first item?

I have aJQuery accordian using the following JS.
function initMenu() {
$('#accordion ul').hide();
$('#accordion li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
And the following HTML
<ul id="accordion">
<li><a class="firstheading" href="#">Making words work</a>
<ul class="panelContent">
<li>
<p>IPSUM</p>
</li>
</ul>
</li>
<li><a class="heading" href="#">Full business-writing services</a>
<ul class="panelContent">
<li>
<p>IPSUM<p>
</li>
</ul>
</li>
</ul>
Can anyone tell me how to ensure the first item is opened when the page loads?

You can use the gt selector to specify the ul's with an index greater than zero, so every ul except the first.
Demo here
function initMenu() {
$('#accordion ul:gt(0)').hide();
$('#accordion li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});

It should be opening automatically, but you can open up accordion pieces programmatically like so:
.accordion( 'activate' , index )
so to open up the first section, you would do
$('#accordion').accordion('activate',0);
You could put that in your document ready function. Note that a selector can also be used in place of the number, which represents each section from 0 onwards.
Source