JQuery - Make .slideToggle specific to each list - javascript

I have a .slideToggle making a list dropdown, but unfortunately it makes all lists dropdown, I need to make it only dropdown the list below the a that I'm clicking on. Sure this is a simple issue, still pretty new to jquery.
Jsfiddle: http://jsfiddle.net/darcyvoutt/shErA/

The following finds the next ul element and runs slideToggle() on it.
$(document).ready(function () {
$('.nav-filters-list-item a').click(function () {
$(this).next('ul').slideToggle(70);
});
});
See this jsFiddle

Try adding an id for each dropdown like this:
<ul class="nav-filters-list">
<li class="nav-filters-list-item" id="genre">Genre
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item" id="tags">Tags
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item">Date
</li>
<li class="nav-filters-list-item">Order
</li>
</ul>
Javascript:
$(document).ready(function () {
$('#genre a').click(function () {
$('#genre ul').slideToggle(70);
});
$('#tags a').click(function () {
$('#tags ul').slideToggle(70);
});
});

Related

Jquery show or hide children link if it is available

I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>
This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>
Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

how to hide ul li with specific class on page load by default before toggle click function apply

I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.

JavaScript CSS - Menu

Hello I need help with my menu if it shows more than 10 on dropdown menu in my exaple below.I want that when I click on ... button (see in example) show the other six languages. I am not good at javascript. Here is the example of the menu where ... is I want on click to show the other Language.
HTML code
<li>
<div class="buttonbg gradient_button">Language</div>
<ul class="gradient_menu">
<li class="gradient_menuitem first">Arabic</li>
<li class="gradient_menuitem">Brazilian</li>
<li class="gradient_menuitem">Dutch</li>
<li class="gradient_menuitem">English</li>
<li class="gradient_menuitem">French</li>
<li class="gradient_menuitem">German</li>
<li class="gradient_menuitem">Greek</li>
<li class="gradient_menuitem">Indonesian</li>
<li class="gradient_menuitem">Malay</li>
<li class="gradient_menuitem">...</li>
<li class="gradient_menuitem">Romanian</li>
<li class="gradient_menuitem">Spanish</li>
<li class="gradient_menuitem">Swedish</li>
<li class="gradient_menuitem">Thai</li>
<li class="gradient_menuitem">Turkish</li>
<li class="gradient_menuitem last">Vietnamese</li>
</ul>
</li>
Example url with css
http://jsfiddle.net/6pxaE/10/
Or with javascript example and all menu show the example that's I want to be the ...
http://myseacheck.besaba.com/ScrollDown.htm
Try this js:
$(".gradient_menuitem:gt(9)").css("display","none");
$(".gradient_menuitem:eq(9)").click ( function (e) {
e.preventDefault();
$(".gradient_menuitem:gt(9)").css("display","block");
});
/* update */
$("#mbmcpebul_table").hover( function () {
$(".gradient_menuitem:gt(9)").css("display","none");
});
Updated DEMO
$(".gradient_menuitem:gt(9)").css("display","none");
$(".gradient_menuitem:eq(9)").click ( function (e) {
e.preventDefault();
$(".gradient_menuitem:gt(9)").css("display","block");
$(".gradient_menuitem:eq(9)").hide();
});
$(".gradient_menu").mouseleave(function(){
$(".gradient_menuitem:gt(9)").hide();
$(".gradient_menuitem:eq(9)").show();
});
Use this jQuery, it works fine for me.
Here is a Fiddle DEMO

open the first section when page loads

HTML:
<li class="page_item ">
A
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
</ul>
</li>
<li class="page_item ">
B
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
<li class="page_item ">
C
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
JS:
$('.page_item').click(function() {
var that = this;
$('.page_item').each(function() {
if (that == this) return true; //continue
$('.children:not(:hidden)', this).slideToggle();
});
$('ul.children', this).slideToggle();
});
Online demo: http://jsfiddle.net/kHLuR/1/
How can I make the first section li opened by default?
Variant #1 Pure CSS solution:
.page_item:first-child .children {
display: block;
}
Demo: http://jsfiddle.net/dfsq/kHLuR/7/
Note: :first-child works in IE8+. If you need to support older version you can give another class to your first li, e.g: <li class="page_item page_item-first"> http://jsfiddle.net/dfsq/kHLuR/9/
Variant #2. Trigger click event on the first .page_item:
$('.page_item').click(function () {
// ...
})
.filter(':first').click();
Demo: http://jsfiddle.net/dfsq/kHLuR/8/
Add this code to simulate a click event when the page is loaded: LIVE DEMO
$(document).ready(function () {
$('a').eq(0).trigger('click');
});
You can use jQuery's .ready() to execute code immediately after the page loads.
Take a look at http://api.jquery.com/ready/

Categories

Resources