A simple vertica menu accordion JavaScript Jquery - javascript

I'm trying to make a simple accordion menu
When you click on the menu the submenus are shown:
When you click "A" or "B" or "C", your respective submenu will be displayed
If the submenu of the letter is open, the only way to close it is to click on the letter again
did not get the way to just apply the jquery to the clicked class
https://jsfiddle.net/mafervemg/g0rb9xL1/
$(document).ready(function () {
$(".submenu").slideDown(); // open web there all submenu close
$(".UP").click(function () {
$(".submenu").slideUp();
});
$(".DOWN").click(function () {
$(".submenu").slideDown();
});
});
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>A</li>
<li>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>B</li>
<li>
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>C</li>
<li>
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>


You need to change a bit in your html and js
Have a look at Js below:
$(document).ready(function () {
$("submenu").slideDown(); // open web there all submenu close
$(".toggle").addClass('open');
$(".UP").click(function () {
$(".submenu").slideUp();
$(".toggle").removeClass('open');
});
$(".toggle").click(function(){
if($(this).hasClass("open")){
$(this).parent().find(".submenu").slideUp();
} else {
$(this).parent().find(".submenu").slideDown();
}
$(this).toggleClass('open');
})
$(".DOWN").click(function () {
$(".submenu").slideDown();
$(".toggle").addClass('open');
});
});
and change html
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li><a href="#" class='toggle'>A</a>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li><a href="#" class='toggle'>B</a> <ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul></li>
<li><a href="#" class='toggle'>C</a> <ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul></li>
</ul>


Error:$ is not defined is because jQuery has not been included properly
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>


I slightly changed your code, Hope you can understand
$(document).ready(function() {
$("submenu").slideDown(); // open web there all submenu close
$('.toggle-menu').addClass('opened');
$(".UP").click(function() {
$(".submenu").slideUp();
$('.toggle-menu').removeClass('opened').addClass('closed');
});
$(".DOWN").click(function() {
$(".submenu").slideDown();
$('.toggle-menu').removeClass('closed').addClass('opened');
});
$('.toggle-menu').click(function() {
if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp();
else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>
A
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>
B
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>
C
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>

Related

jQuery UI Sortable Multiple element target

I have 2 list element
<div id="list-one">
<ul class="ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
Can ul-two list element order follow ul-one order when I sort ul-one using jQuery Sortable ?
I want get the result like
<div id="list-one">
<ul class="ul-one">
<li data-order="2">item 2</li>
<li data-order="1">item 1</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="ul-two">
<li data-order="2">item 5</li>
<li data-order="1">item 4</li>
<li data-order="3">item 6</li>
</ul>
</div>
just drag ul-one element
Thanks for the answer

Sorry for misunderstand the question.
This is a working solution. I added id tag to easy call
http://jsfiddle.net/39ZvN/1141/

Try this
<div id="list-one">
<ul class="sort ul-one">
<li data-order="1">item 1</li>
<li data-order="2">item 2</li>
<li data-order="3">item 3</li>
</ul>
</div>
<br />
<div id="list-two">
<ul class="sort ul-two">
<li data-order="1">item 4</li>
<li data-order="2">item 5</li>
<li data-order="3">item 6</li>
</ul>
</div>
$( '.sort li' ).each(function() {
var position = $(this).data('order');
$(this).siblings().eq(position+1).after(this);
});

Dropdown submenu issue

I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D

I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>

wordpress foundation accordion mobile submenu

I am trying to integrate the accordion feature to wordpress menu.
i came across with a code but it didn't give me the full expectation(not really a js guru).
here is the html code:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>Option 2 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 3</li>
<li>Option 4 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</aside>
<section class="main-section">
Content
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
and here is the jscript:
$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
var icon = $(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
$(this).parent().next(".off-canvas-submenu").slideToggle('fast');
$(this).find("span").text(icon);
});
this works perfectly only for a static page, also work a bit in wordpress but the stuggle is that when you click on item in the menu all the li with submenu opens instead of one at a time. take attention of the html structure of the menu:
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>Option 2 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 3</li>
<li>Option 4 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</aside>
the ul submenu is in the same level with the li menu.
in wordpress the ul.submenu is inside the parent li menu.
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>
Option 2 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</aside>
the curent code is actually working a bit, but we don't want to open all the submemnu by only clicking a single li.
here is the codepen

$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
var icon = $(this).parent().find(".off-canvas-submenu").is(':visible') ? '+' : '-';
$(this).parent().find(".off-canvas-submenu").slideToggle('fast');
$(this).find("span").text(icon);
});
Made it worked this way using .find(), you will need to style the .off-canvas-submenu since its not on the same level as the other elements anymore therefor not inheriting the style of first level <ul> but in all you should me good.
Edit:
Works with multiple submenu
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>
Option 2 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
<li>
Option 3 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</aside>

Javascript from onmouseover to onclick

I'm using this piece of code for my website to implement a dropdown menu:
<script>
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
</script>
and
<div style="margin-left:150px">
<ul class="menu" id="menu">
<li>Dropdown One
<ul>
<li>Navigation Item 1</li>
<li>
Navigation Item 2
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
</ul>
</li>
<li>
Navigation Item 3
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>
Navigation Item 3
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
<li>Navigation Item 6</li>
</ul>
</li>
<li>Navigation Item 4</li>
</ul>
</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
I tried to convert h.onmouseover and h.onmouseout in h.onclick because i want the menu to expand when the user clicks on it.
How can i do that? I'm newbie in Javascript.

try this:
change from
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
change to
h.onclick=new Function(this.n+'.st('+i+',true)');

JQuery slideToggle for multicolumn list

I`ve got a big list with the width of li 33%, so there are 3 columns.
computers monitors hi-fi
sex-toys pancakes scissors
In each of them there is UL hidden, which on click slideToggle.
JQuery
$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
$(this).siblings('ul').slideToggle('fast');
});
The problem that dont slide as I want, they rebuld the list every time, like so
computers monitors hi-fi
[li]cars sex-toys pancakes
[li]dogs scissors
I want to slide them this way:
computers monitors hi-fi
[li]cars pancakes scissors
[li]dogs
sex-toys
How can I achieve this??
jsFiddle
jsFiddle 2 - in this case need the red bg color be for 3 columns

I added a clearer div between every three li
<ul class="subCategory">
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Cars</span>
<ul class="submenu">
<li>Car 1</li>
<li>Car 2</li>
<li>Car 3</li>
<li>Car 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Phones</span>
<ul class="submenu">
<li>Phone 1</li>
<li>Phone 2</li>
<li>Phone 3</li>
<li>Phone 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Guns</span>
<ul class="submenu">
<li>Gun 1</li>
<li>Gun 2</li>
<li>Gun 3</li>
<li>Gun 4</li>
</ul>
</li>
<div class="clearer"></div>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Notebooks</span>
<ul class="submenu">
<li>Notebook 1</li>
<li>Notebook 2</li>
<li>Notebook 3</li>
<li>Notebook 4</li>
</ul>
</li>
CSS
.clearer
{
clear:both;
}
You can also get the index of the current clicked li and with some math add a clearer div on click and remove it when needed but there I think there is no need for this

Categories