show category after click (jquery) - javascript

I made this simple script:
var jq111 = jQuery.noConflict();
jq111( ".main-cat" ).click(function() {
jq111( ".child" ).toggle( "slow" );
});
This show child category when i click on main-cat.
Example:
CAR
Audi <- show after click
Ferrari <- show after click
Fiat <- show after click
I have a problem that,all main category drop her child when i click one of their.
Another main category:
Bicycle, Motorcycle etc..
The categories are dynamic, all main have the same class because they are output by loop.
How can I expand only the categories within its container?
HTML:
<ul class="main-cat">
<li>CAR
<ul class="child">
<li>Ferrari</li>
<li>Fiat</li>
<li>Lamborghini</li>
</ul>
</li>
<ul class="main-cat">
<li>Motorcycle
<ul class="child">
<li>Honda</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>

Try this:
<ul class="main-cat">
<li>CAR
<ul class="child">
<li>Ferrari</li>
<li>Fiat</li>
<li>Lamborghini</li>
</ul>
</li>
</ul>
<ul class="main-cat">
<li>BICYCLE
<ul class="child">
<li>Bike 1</li>
<li>Bike 2</li>
<li>Bike 3</li>
</ul>
</li>
</ul>
NOTE: the structure of the elements. They are wrapped in its own 'ul' tags
And your javascript:
$(document).ready(function() {
var jq111 = jQuery.noConflict();
jq111('.main-cat ul').hide() //hide all by default
jq111( ".main-cat" ).click(function() {
jq111('.main-cat ul').hide() //this will hide the elements if one is already open
jq111(this).find( ".child" ).show( "slow" );
});
});
The working demo is here:
https://jsfiddle.net/5j8ne1tz/

It's hard to make a definite recommendation without see the actual HTML - but perhaps this will work?
var jq111 = jQuery.noConflict();
jq111( ".main-cat" ).click(function() {
jq111(this).find( ".child" ).toggle( "slow" );
});
That should find each .child element below the .main-cat classed element that was clicked.

Related

How to prevent jQuery click event firing on multiple elements at same time?

I have the above code which ideally will slide toggle the ulContainer but it doesn't work as expected. I would like it so when I click on the selector above, it only toggles one of the ul#dropdown-download-links li > a one click at a time. Currently, obviously it toggles them all on click.
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
I hope that makes sense, I feel like it's a super common probelm it's just hard to explain.
The event is bound on the 'a' element, to get and toggle the child items, you first need to go up one level with the 'parent()' method which returns the 'li' element. After that use the find method to get the child list items.
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).parent().find("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>
$(document).ready(function(){
$("ul#dropdown-download-links li:first-child >a").unbind().click(function(e) {
var ulContainer = $(this).closest("li");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
<li>Test
<ul>
<li>Toggle on click etc</li>
</ul>
</li>
<li>Test
<ul>
<li>But don't toggle on click of first one</li>
</ul>
</li>
</ul>

Finding Child of Parent Jquery

I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});

.toggle() on childNodes / toggle undisplayed elements 2 by 2

Here is the code I'm stuck with for too long..
<ul class="list">
<li> </li>
<li><p>qwerty</p> </li>
<li style="display:none;"> </li>
<li style="display:none;"> </li>
</ul>
In a separated file:
function plusArg() {
var ul = document.getElementsByClassName('list')[0];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI' )
ul.childNodes[i].toggle('fade',1000);
//ul.childNodes[i].innerHTML = 'test' ;
}
}
No sign when I call the plusArg() function :/ (the test line runs when uncommented). I searched on google why toggle would not run with childNodes but no answers. I guess there's a good reason but do you know it ? And if there is no way to do what I want this way, how could I do it differently ? The final goal is to display a bunch of ten more lis undisplayed by clicking an unique button.
Thanks in advance !
This is how it can be achieved with jQuery:
Toggle
<ul class="list">
<li>first</li>
<li><p>qwerty</p></li>
<li style="display:none;">Third</li>
<li style="display:none;">Fourth</li>
</ul>
$("#button").on("click",function(){
$(".list li").each(function(){
$(this).fadeToggle( "slow", "linear" );
});
});
Fiddle: http://jsfiddle.net/qho65ov4/
Thank you Albert Kuzmin ! I managed to achieve what I wanted to thanks to your code ! Here is the code:
Toggle
<ul class="list">
<li>First</li>
<li>Second</li>
<li style="display:none;">Third</li>
<li style="display:none;">Fourth</li>
<li style="display:none;">Fifth</li>
<li style="display:none;">Sixth</li>
</ul>
$("#button").on("click",function(){
var index = 0;
$(".list li").each(function(){
if (!$(this).is(":visible") & index != 2){
index++;
$(this).fadeToggle( "slow", "linear" );
}});
});
The Jsfiddle : http://jsfiddle.net/qho65ov4/2/

jquery toggleClass to just children element

i have an issue to toggleclass for just children element.
<ul class="sample-menu">
<li id="sample-topmenu_2">
Menu Text
<ul class="sample-submenu">
<li class="submenu">Submenu Text</li>
<li class="submenu">Submenu Text</li>
</ul>
</li>
<li id="sample-topmenu_3">
Menu Text2
<ul class="sample-submenu">
<li class="submenu">Submenu Text2</li>
<li class="submenu">Submenu Text2</li>
</ul>
</li>
i use this jquery toggle, but it's toggle all li elements for all menu.
$( "*[id^=bga-topmenu_] p" ).click(function() {
$("li.submenu").toggleClass( "sumenu_show" );
});
I appreciate your help.
Try:
$( "*[id^=bga-topmenu_]" ).click(function() {
$(this).find("li.submenu").toggleClass( "sumenu_show" );
});
You can use $(this) to get the current context (i.e. the clicked element) and then find all <li> elements with the submenu class within that context, using the .find() method.

Vertical menu type accordion

I have problem with vertical menu type accordion.
<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
<li>Investment advantage</li>
<li>Statistics </li>
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li>Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
<li>Investment regulations</li>
<li>How can we help</li>
<li class="is-selected">Sectors of opportunity
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li class="is-selected">Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
</li>
</ul>
</div>
</div>
and
<script type="text/javascript">
$(function(){
$(document).on('click', ".nav-section-level-2 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') )
$('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});
$(document).on('click', ".nav-section-level-3 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
});
});
</script>
algorithm vertical menu is working, but very bad. collapsed and expanded not working correctly!
How can I find resolve for my problem?
Please, ready resolves (type JQuery UI) not to offer.
Thank you very much.
I am not sure if I got it right. But here is one solution:
Modified example
$(function(){
$(".nav-section-level>li").on('click',function(e){
var ulElement = $(this).find('ul');
var isSameElement = $(ulElement).hasClass("open");
if( $("ul.open") !== undefined){
$("ul.open").slideToggle('slow');
$("ul.open").removeClass("open");
}
if(!isSameElement){
$(ulElement).slideToggle('slow');
$(ulElement).addClass("open");
}
});
});
First of all your html is little messy clean it up. Second you do not need to add any classes or anything to your li. Simple slidetoggle on click. Which will show hide your child ul.

Categories

Resources