need help on this please
need this when click it slides down the content and when clicked again it slides up
<li>...</li>
<li>...</li>
<li id="with-content">Click here
<div class="content">Some div here Some div here Some div here</div>
</li>
only that particular list and not all list need to show content or hide with the slide effect
how can I do this with jquery? please any help would do, just a simple slidedown + slideup effect
This should be trivial to figure out with a search, and a little effort goes a long way, but I'll answer anyway:
$('#with-content a').on('click', function(e) {
e.preventDefault();
$(this).closest('li').find('.content').slideToggle(600);
});
ID's are unique, and it probably needs to be wrapped in document.ready and jQuery must be included on the site ?
$('#with-content a').on('click', function(e) {
e.preventDefault();
$('#with-content').toggle();
});
Related
I'm simply creating a nav menu and have a basic unordered list with a "sub-menu" within. Here's the Jquery. The reason for the "active" class and if statement is that I want the slider to remain open if choosing another item on the list, so that it doesn't close and open again each iteration.
The problem part here for me in the code is here.
$('.slider').html( $(this).find('ul') );
The main issue is that on('click',), is only updating the first time it's clicked. On a second click on another item in the menu, it doesn't update itself with the new selection and therefore doesn't show the new sub-menu list? Console log shows that it is undefined. But it should be like the first time?
I don't understand why this is happening or the reasons behind it! Logic tells me the same thing that happens the first time, should keep happening, and therefore work?! Help appreciated before I make a hole in the wall with me forehead!
$(document).ready(function() {
$('ul > li > ul').hide();
$('.slider').hide();
// Menu
$('.menuNav > ul > li').on('click', function() {
// if active
if ( $(this).hasClass('active') ) {
$(this).parents().children().removeClass('active');
$('.slider').hide('slide', 200);
}
// if unactive
else {
$(this).addClass('active');
$('.slider').show('slide', 200);
$(this).siblings().removeClass('active');
// Show related list
$('.slider').html( $(this).find('ul') );
}
});
});
HTML
<div class="menuNav">
<ul>
<li><span>item_1</span>
<div class="sub_position">
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</div>
</li>
<li><span>item_2</span>
<div class="sub_position">
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</div>
</li>
.... etc
</ul>
</div>
Your issue likely arises from the fact that you are actually moving the entire submenu into .slider, instead of cloning it. This means that the submenu will be removed from the original menu the first time you click it, and clicking on it again will mean that the nested submenu selector $(this).find('ul') will return an empty set.
To circumvent this issue, I suggest that you do the following:
Append the outerHTML of the submenu to slider, i.e. $(this).find('ul')[0].outerHTML
If you want to hide the submenu in the menu when this is done, simply hide/unhide it when appropriate.
You can always use $(this).find('ul').html() for the same effect, but remember that <li> elements must be immediate children of <ul>. Therefore, we need to clone the outerHTML as well (i.e. copy the <ul>) to ensure that you have a valid HTML being injected into your slider.
$(document).ready(function() {
$('ul > li > ul').hide();
$('.slider').hide();
// Menu
$('.menuNav > ul > li').on('click', function() {
// if active
if ($(this).hasClass('active')) {
$(this).parents().children().removeClass('active');
$('.slider').hide('slide', 200);
}
// if unactive
else {
$(this).addClass('active');
$('.slider').show('slide', 200);
$(this).siblings().removeClass('active');
// Show related list (changed: now we use HTML's native outerHTML object
$('.slider').html($(this).find('ul')[0].outerHTML);
}
});
});
.slider {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="slider"></div>
<div class="menuNav">
<ul>
<li><span>item_1</span>
<div class="sub_position">
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</div>
</li>
<li><span>item_2</span>
<div class="sub_position">
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</div>
</li>
</ul>
</div>
You have to fix this line
$('.slider').html( $(this).find('ul') );
I am not sure what you are trying to achieve here, but you cannot treat a DOM object as HTML code. The reason your code works once is that this line is does not fire the first time (your first IF statement fires). The second time ELSE kicks in and this evil line messes things up.
Solution 1: Comment out or remove this line
//$('.slider').html( $(this).find('ul') );
Solution 2: Figure out what you want to do with this line and do it the proper way.
I'm new to Javascript so this may be a stupid question, but I'm at a loss. I've been trying to get my dropdown to hide/close when the right list item is selected. I'm using the hover dropdown provided by W3Schools. I've copied the CSS they've provided and my HTML and JS look like this:
<div class="dropdown" id = "menu3">
<button class="dropbtn" id = "menu3btn">Menu 3</button>
<div class="dropdown-content" id = "menu3c">
<ul>
<li><a id="item30">Cheese</a></li>
<li><a id="item31">Pepperoni</a></li>
<li><a id="item32">Sausage</a></li>
</ul>
</div>
</div>
And JS:
$(document).ready(function(){
$('li').click(function(){
if($(this).text() == "Sausage"){
$(this).parent().parent().hide();
}
}
}
The current Javascript is closing the dropdown if the user clicks "Sausage", which is what I want. But when I hover over the menu again, the dropdown doesn't open/show. I've tried changing
$(this).parent().parent().hide();
to
$(this).parent().hide();
and the results are the same.
I've also tried to toggle the dropbtn by replacing the parent().hide() code with:
var btnName = "#"+$(this).parent().parent().parent().attr("id")+"btn";
$(btnName).toggle();
This removed the button and dropdown menu from the screen entirely.
I've also tried forcing the hover to show hidden dropdown-content by adding this method to my JS:
$(".dropdown").hover(function() {
if($(this).attr("id") == "menu3"){
$("#menu3c").show();
}
}
This didn't do anything either (the hidden content stayed hidden).
Any help would be much appreciated.
Instead of $(this).parent().parent().hide();, you can use this to hide the parent
$(this).closest('div').hide();
To show the menu again,
$('#menu3btn').on('click', function() {
$('#menu3c').toggle();
});
I have a bit of jQuery code I am trying to get to work here. I basically have a vertical nav menu with two items that have jQuery dropdown menus that pop out to the side. However, when you hover over them both quickly they are displayed overlapping each other. So what I am trying to accomplish is that if one is hovered on and pops out, if the other one is already displayed it will slideUp and be hidden. The dropdown trucks already existed I am adding on the engines one. I will keep working on it but if anyone can help out I would appreciate it.
/* Dropdown Menu Trucks*/
$("#menu-main-menu .show-dropdown").hover(function(){
$("#dropdown").slideDown('fast');
});
$("#dropdown").mouseenter(function(){
$("#dropdown").show();
});
$("#dropdown").mouseleave(function(){
$("#dropdown").slideUp('fast');
});
// ----------------------------
/* Dropdown Menu Engines */
$("#menu-main-menu .show-dropdown2").hover(function(){
$(".dropdown-engines").slideDown('fast');
});
$(".dropdown-engines").mouseenter(function(){
$(".dropdown-engines").show();
});
$(".dropdown-engines").mouseleave(function(){
$(".dropdown-engines").slideUp('fast');
});
if ($('#dropdown').is(':visible')) {
$(".dropdown-engines").slideUp();
}
else if ($('.dropdown-engines').is(':visible')) {
$("#dropdown").slideUp();
}
edit: let me approach this another way that seems easier to accomplish..
$("#menu-main-menu .dropdown2").hover(function(){ // hover over .dropdown2
// show #dropdown-engine
$("#dropdown-engine").slideDown('fast');
});
$("#dropdown-engine").mouseenter(function(){ // mouse enter #dropdown-engine
// show #dropdown-engine
$("#dropdown-engine").show();
});
$(".dropdown2" || "#dropdown-engine").mouseleave(function(){
$("#dropdown-engine").slideUp('fast'); // mouse leave #dropdown-engine
// *or .dropdown2 slideup
}); // but only if not hovering on either
The question isn't completely clear to me, but I think this is want.
I noticed that you used id's that are not present in your jsfiddle and are using classes and id's mixed. Try to be consistent and think DRY, by using data-target and the classes like in the example, the code is cleaner and shorter.
$(function(){
$(".dropdown").hide();//hide all dropdowns on start
$(".show-dropdown").mouseenter(function(){
//on mouse enter of a .show-dropdown, we slideup all .dropdowns
$(".dropdown").slideUp("fast");
//then we get the ID of the dropdown we want to show through the data-target attribute, and slide it down.
$("#"+$(this).attr("data-target")).slideDown("fast");
});
});
<ul>
<li class="show-dropdown" data-target="dropdown-trucks"><!--data target is the ID of dropdown you want to show-->
Trucks
</li>
<li class="show-dropdown" data-target="dropdown-engines">
Engines
</li>
</ul>
<ul id="dropdown-trucks" class="dropdown">
<li>Truck 1</li>
<li>Truck 2</li>
</ul>
<ul id="dropdown-engines" class="dropdown">
<li>Detroit Series 60 Engine</li>
<li>Cummins N14 Engine</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I ended up just using hide(); on hover to hide the element I didn't want to see. I was severely overthinking this. Thanks to anyone who answered.
Friends, I am working on JavaScript for collapse/Expand <UL> list.
here is my Code. I am wanted to work on it, in Nth Level, i can show Child, but its not hiding Children.
I hope you guys will help me..
Thanks in Advance...
This will do the trick:
event.stopPropagation();
Docs.
If you debug your code you'll see that the event is being called for each parent ul. Check this out:
$("#ExpList ul li:has(ul)").click(function(event) {
event.stopPropagation();
$(this).find('> ul')
.toggleClass("hiddenChild")
.toggleClass("displayChild");
});
And the HTML:
<div id='ExpList'>
<ul>
<li>Platform-1
<ul class='hiddenChild'>
<li>Child-1
<ul class='hiddenChild'>
<li>P-C-C-1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Fiddle.
HTML considerations:
I don't know if you can use a div wrapping the whole list, but I think it would make more sense doing it;
You're using the id ExpList for all ul. This is not how we use an id. Instead, for selecting many elements use its own tag or a common class;
I removed the onClick = openChild() which were present in all ul. It was throwin an error in your fiddle.
JavaScript considerations:
You don't have to mix a selector with a find this way $("#ExpList").find('li:has(ul)'). You can just use it on the same selector, as I did $("#ExpList ul li:has(ul)");
You don't need to search for all ul children($(this).children('ul')) since you'll have just one, I used this instead, which looks for just one: $(this).find('> ul');
As said before, the event.stopPropagation() does the trick. You don't need to trigger click event on all parent ul.
In CSS, I just changed #ExpList to this #ExpList ul to work in the new structure. I hope it helps.
I am struggling to figure out where I am going with the current show and hide function I am trying to incorporate on my site. I have a drop down menu show and hide function similar to the one currently implemented at Hippodrome Mobile Casino. Which is identical to my HTML. My div class I am noticing with my Jquery when i click the next button .regNext it hides all three .regGroupContent divs. However i want to add and remove the active class which i current have as display:none on my site.
$('.regGroupContent').removeClass('active');
$('.regGroupContent').eq(0).addClass('active');
$('.regNext').click(function () {
var $this = $(this);
$('.regGroupContent').hide().removeClass('active');
$this.parent().children($('.regGroupContent')).show().addClass('active');
});
Html
<div class="vengeForm">
<div class="regGroupContent">
<div class ="fieldset">
<ul class="fieldset">
<li class="editor-next">
</li>
</ul>
</div>
</div>
</div>
This line has a bit of a syntax issue:
$this.parent().children($('.regGroupContent')).show().addClass('active');
In the children selector, you don't need a jQuery object, rather just the class name. Also, your .parent() selector is only going one level up, you need to get to the top of the element tree. Try changing it to:
$this.parents('.vengeForm').children('.regGroupContent').show().addClass('active');