Develop Reference

How to toggle next ul class?

I am trying to open/close nested sub menus, I have three or four levels of nested uls which are all closed but the first one. When I start clicking on the elements, the next ul should open and toggle show/hide. The js below it's not fully accomplishing what I am looking for.
CSS
.closed {
display: none;
}
.opened {
display: block;
}
HTML
<ul>
<li><button type="button">TOGGLE</button>
<ul class="closed">
<li>Two
<ul class="closed">
<li>Three
<ul class="closed">
<li>Four</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Trying js:
$("button").on("click", function(){
$(this).parent().next("ul").toggle(function() {
$(this).removeClass("closed").addClass("opened");
}, function() {
$(this).removeClass("opened").addClass("closed");
});
});

You should use $(this).next("ul") instead of $(this).parent().next("ul"), because ul is the immediate next element of the button. And you can use toggleClass method for toggling class like following.
$("button").on("click", function(){
$(this).next("ul").toggleClass("closed opened");
});

How to show/hide when hover in/out on specific element

I make a secondary menu and I like it to be displayed when user hover a specific one of the main menu items....
I tried this code but it didn't work...
.second-menu {display:none}
ul li #2:hover + .second-menu {display:block}
<ul>
<li id="1">first</li>
<li id="2">second</li>
<li id="3">third</li>
<ul>
<div class="second-menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
any suggestions?....
only by css or javascript....

If you wish to use CSS, you will have to put your sub menu inside the element that you want to hover.
For the CSS, C.Raf.T's answer is perfect.
If for some reason you want to use javascript you could do something like this
document.getElementById('2').addEventListener('mouseenter', function ()
{
document.getElementById('subMenu').style.display = "block";
});
document.getElementById('2').addEventListener('mouseleave', function ()
{
document.getElementById('subMenu').style.display = "none";
});
Note: the above code requires you to add a "subMenu" id to the div containing your menu. If you wish to display serval menus with only one hover event, use a class instead.
But honestly, the CSS answer is the best way to go if all you need is nested sub menus.
If the sub menu has to be outside of the parent, you will need the javascript.

.second-menu{
display:none;
}
li:hover >.second-menu{
display:block;
}
<ul>
<li id="1">first</li>
<li id="2">second
<ul class="second-menu">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</li>
<li id="3">third</li>
<ul>

Answer using Javascript,
document.getElementById('hover').onmouseover = function(){
document.getElementById('second-menu').style.display = 'block';
}
document.getElementById('hover').onmouseout = function(){
document.getElementById('second-menu').style.display = 'none';
}
.second-menu{
display:none;
}
<ul id="hover">
<li id="1">first</li>
<li id="2">second</li>
<li id="3">third</li>
<ul>
<div class="second-menu" id="second-menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
Here is a fiddle

By using pure CSS you have to ensure that your submenu (.second-menu) is a child-node of your hovered HTML-Element. Because CSS unfortunately doesn't know a parent selector.
By using JS you are more flexible. Means placing the submenu wherever you wish.
* { margin: 0; padding: 0; }
.second-menu {display:none; border: 1px solid blue; width: 100%; position: absolute; left: 0; right: 0; }
ul li#two:hover > .second-menu {display:block}
.relative { position: relative; border: 1px solid black; }
li { display: inline-block; }
<ul class="relative">
<li id="one">first</li>
<li id="two">second
<ul class="second-menu">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</li>
<li id="three">third</li>
<ul>

Jquery expand and collapse menu is not working

I am working on a sidebar menu navigation which expands and collapses when user clicks on the menu. On top of that, I want the menu to stay expanded if the link on the sub menu is active when the page loads.
This is the code sample that I am working on right now. Can someone please help me check the issue on my code?
jQuery(document).ready(function(e) {
{
var m = e("ul.menu li.sidebar ul.sub-menu");
e("li")
}
e("ul.menu > li.sidebar > a").click(function(e) {
e.preventDefault()
}),
e(document).mouseup(function(i) {
var n = e("li.sidebar");
n.is(i.target) || 0 !== n.has(i.target).length || m.hide("fast")
});
});
.sidebar {
padding: 0 !important;
margin-top: 2%;
}
.sidebar a {
background-color: #122842;
padding: 3%;
color: white !important;
}
.sidebar .sidebar-submenu a {
color: #6e6e6e !important;
background-color: #e1ecf1 !important;
display: block;
}
.sidebar .current-menu-item a {
color: #22374f !important
}
.sidebar .sub-menu {
display: none;
}
.current-menu-ancestor .sub-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul class="menu ">
<li class="sidebar current-menu-ancestor">Menu A ▶
<ul class="sub-menu">
<li class="sidebar-submenu current-menu-item">submenu 1
</li>
<li class="sidebar-submenu current-menu-item">submenu 2
</li>
<li class="sidebar-submenu">submenu 3
</li>
</ul>
</li>
<li class="sidebar current-menu-ancestor">Menu B ▶
<ul class="sub-menu">
<li class="sidebar-submenu current-menu-item">submenu 4
</li>
<li class="sidebar-submenu">submenu 5
</li>
<li class="sidebar-submenu">submenu 6
</li>
</ul>
</li>
<li class="sidebar">Menu C ▶
<ul class="sub-menu">
<li class="sidebar-submenu">submenu 7
</li>
<li class="sidebar-submenu">submenu 8
</li>
</ul>
</li>
</ul>
These are the behavior that I want to achieve:
Submenu 1, submenu 2, and submenu 4 are on the same page but different 'menu'. If the page is selected, both menu A and menu B expand while menu C stay collapse.
If user clicks on submenu 3 which is under menu A, when the page loads, menu A expands while menu B and C collapse.
Whenever a submenu is active, class "current-menu-item" is added to
the li tag and class "current-menu-ancestor" is added to the ul tag
The issue that I have right now:
The menu is automatically expanded when any sub-menu is active, but the menu is not clickable
when I replace the jQuery with the code below, the menu is clickable
and automatically expanded when any sub-menu is active, BUT the sub
menu is not clickable (not opening the link)
jQuery(document).ready(function(e){
jQuery('.sidebar a').click(function(e){
e.preventDefault();
if (jQuery(('.sidebar').children('.sub-menu:first').is(':visible')) {
jQuery(('.sidebar').children('.sub-menu:first').hide();
} else {
jQuery(('.sidebar').children('.sub-menu:first').show();
}
});
});
Thank you in advance!

Please add jquery cookies library in your head just after jquery
<script src="path/to/Scripts/jquery_cookie.js" type="text/javascript"></script>
check this for more info stack-cookie-is-not-function

How can display a menu item border even if the document is reloading?

I have this sample:
link
CODE HTML:
<div class="menu">
<ul>
<li>Link1
<li>Link2
<ul>
<li>Home Link 1 Link 1</li>
<li>Home Link 1 Link 2</li>
<li>Home Link 1 Link 3</li>
</ul>
</li>
</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CODE CSS:
ul{
list-style-type:none;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.active{
border-left:2px solid red;
}
CODE JS:
$('.menu li ').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
My problem is following
If a user click for example on the element 4 and page reload,element 4 not have border-left
In the above example this works because everything is dinamic..dar imagine what would happen when opening a new HTML page...then the menu item that was clicked not have border-left.
How can I solve this problem?
Thanks in advance!

You cant show a menu bar or infact anything if the whole page is getting reloaded. But you can use AJAX calls for it. It will reload or update only a part of the page so that the menu remains as it is.

How to create a simple jQuery tabs without jQuery UI?

When I click on the tab it then displays the content that is associate. I'm using # to do it. Here is what I have tried, but I don't know how to do the switching part, Can someone help please?
So when click tab1 to show tab1 content, and click tab2 to show tab2 content and so on.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
Edit, I prefer not to use jQuery UI or any plugins.

You're very close here, just a couple things:
1) I would suggest applying the "active" class to the parent <li> so your highlighting will be simpler to get at
2) Use the href of the clicked link to switch out the content, and I would use a class to hide/show content, however I will provide jQuery following your example of using the show() and hide() method. Either approach would work.
The final jQuery would be something like this:
$(document).ready(function() {
$('.tab-content').slice(1).hide();
$('.tab-menu li').eq(0).addClass('active');
$('.tab-menu li a').click(function(e) {
e.preventDefault();
var content = $(this).attr('href');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
$(content).show();
$(content).siblings('.tab-content').hide();
});
});
It's working in a fiddle for reference: http://jsfiddle.net/yscbeaxh/

It's really hard to get tabs right. Your current code isn't too bad, but you will face hiccups eventually. I can't say what OTTOMH, but, you will ;).
For your current code, you need to take the href attribute from the click li, select the matching p (based on ID - it's handy that the href attr returns #tab-1, you can use that as your selector!), and show it. You'll also want to hide the other 'active' tabs, and remove the class from any 'active' li's too.
This code should do the trick.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$('.tab-menu li a.active').removeClass('active');
var tabDivId = $(this).attr('href');
$(this).addClass('active').siblings().removeClass('active');
$('p.tab-content').hide();
$(tabDivId).show();
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

The solution is very simple.
First I gave all the tabs a display of none and the active class display:block;
Than with jquery I take the href value of the <a> you clicked and than use that as the selector to add class active to the right tab.
demo
html:
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tabs">
<p id="tab-1" class="tab-content active">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
</div>
css:
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
.tabs{
width:50%;
}
.tabs > p{
display:none;
}
.tabs .active{
display:block;
}
Jquery:
$(document).ready(function () {
$('.tab-menu li a').click(function () {
$('.tab-menu li a').removeClass('active');
$(this).addClass('active');
tab = $(this).attr('href');
$('.tabs .active').removeClass('active');
$(tab).addClass('active');
});
});