When a user clicks the Accordion Menu button it usually works. But, about 1 out of 10 times the animation doesn't stick and goes back to either expanded or collapsed, depending on what state it started at. I've copied the scripts from other places, but they seem simple enough.
HTML:
<ul id="system-nav">
<li><div>Umbrella</div>
<ul>
<li>Admin</li>
<li>Dashboard</li>
<li>Daylight</li>
</ul>
</li>
</ul>
Like I've said, I've tried several different versions of the same thing. These were just taken from random places and I've only edited them slightly. All of them do the same thing.
$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#system-nav ul').slideUp(300);
}
$(this).next().slideToggle(300).delay(250);
});
$('#system-nav ul:eq(0)').hide();
$(document).ready(function() {
$('#system-nav li div').click(function() {
$('#system-nav ul').slideUp('slow');
$(this).next().slideDown('slow');
});
$("#system-nav ul").hide();
});
$(document).ready(function(){
$('#system-nav li div').click(function() {
$(this).next().slideDown('slow');
return false;
}).next().hide();
});
In the first JS sample using :visible is not the right proprety. Use :hidden instead
In the second one you're cliping it ?
In the last one you're canceling it ?
Here's a working code: http://jsfiddle.net/Q9qNw/
$("#system-nav").on("click","div",function(){
if ($(this).next().is(":hidden")) {
$(this).next().slideDown("500");
} else {
$(this).next().slideUp("500");
}
});
Related
This question already has an answer here:
Why doesn't my equality comparison using = (a single equals) work correctly? [duplicate]
(1 answer)
Closed 6 years ago.
I'm trying to make a responsive navigation:
<header>
<nav>
<ul class="navigation">
<li>
asd
</li>
<li>
asd
</li>
<li>
asd
</li>
<button type="button" id="showmenu"> << </button>
</ul>
</nav>
</header>
Can't use toggle for jquery since the button also disappers, so i tried another way, however the else statement is not executing
$(document).ready(function() {
if(menu=1) {
$('#showmenu').click(function(){
$('nav ul li').hide()
$('nav ul').css('width', '3%');
menu = 2;
});
}
else {
$('#showmenu').click(function() {
$('nav ul ').show();
$('nav ul').css('width', '100%');
menu = 1;
});
}
});
It's an inline navigation sliding to the left. I've seen a bunch of other example, but not a single one where the button hiding the menu is in the navigation. Got any suggestions on how to make this work? Used toggle before that, but the else statement still wouldnt execute. Here 's a JS fiddle: http://jsfiddle.net/qEtgR/7/
Edit: == operator doesn't change a thing, else statement still does not execute, neither does stating a global var menu.
Here is the issue :
$(document).ready(function() {
if(menu==1) { // "==" missed here
$('#showmenu').click(function(){
$('nav ul li').hide()
$('nav ul').css('width', '3%');
menu = 2;
});
}
else {
$('#showmenu').click(function() {
$('nav ul ').show();
$('nav ul').css('width', '100%');
menu = 1;
});
}
});
Use equality operator
if(menu==1) {
I'm not sure what exactly is wrong with my code
<ul>
<li>
<p id='placeHolder' style='display: none;'>Empty NOW!</p>
<ul class='list'>
<li>Item One<a href='#' class='clear'>Remove</a></li>
<li>Item Two<a href='#' class='clear'>Remove</a></li>
</ul>
</li>
</ul>
$('a.clear').click(function() {
$(this).parent().remove();
if($('.list li').length == 0) {
document.getElementById('placeHolder').style.display='block';
console.log('its empty now');
}
return false;
});
Let's say you removed the items from the list and li is now ZERO, I'm not sure why placeHolder doesn't actually display the placeHolder?
I used console.log to make sure the length actually checked and it is a valid statement. Any suggestion on why getElementById not firing?
In order to validate your condition $('.list li').length == 0, you have to remove the two list items, either by finding a common selector :
$('li a').click(function() { // the choice of the selector is of course up to you :)
$(this).parent().remove();
if($('.list li').length == 0) {
document.getElementById('placeHolder').style.display='block';
console.log('its empty now');
}
return false;
});
or by removing the parent of the parent : $(this).parent().parent().remove();
I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle
When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$('#nav .is-open').removeClass('is-open').hide();
$(this).removeClass('active');
}
});
It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?
If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...
$('#nav').children('li').first().children('a').addClass('active')
.next().addClass('is-open').show();
$('#nav').on('click', 'li > a', function() {
if (!$(this).hasClass('active')) {
$('#nav .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('#nav').find('.active').removeClass('active');
$(this).addClass('active');
}
});
Check this Fiddle
I have this
HTML
<p class="showOnlyChoose"> Show </p>
<ul>
<li>Not Taken</li>
<li>Not Taken</li>
<li class="Choose">Taken</li>
<li>Not Taken</li>
<li class="Choose">Taken</li>
<li>Not Taken</li>
</ul>
What I am wanting is if I click on the Show only the Taken list will show and others will hide. I searched but did not find good results. Also is this possible with jQuery ? I am not very good in jQuery. Any help will be appreciated.
$('.showOnlyChoose').on('click', function() {
$('li.Choose').show().siblings().hide();
// $('li').hide().filter('.Choose').show();
})
You can use this:
$('.showOnlyChoose').click(function(){
$('li').toggle();
$('li.Choose').show();
var current_text = $(this).text();
$(this).text(current_text == "Show" ? "Show" : "Hide");
});
Demo here
And when you want to get them back just use: $('li').show();
If you want the paragraph to toggle the "Not Taken" rows and change "Show" to "Hide" (and vice versa), use:
$('.showOnlyChoose').on('click', function() {
$('li').toggle(); //show or hide all items
$('li.Choose').show(); //show .Choose items
if ($('.showOnlyChoose').html() == 'Show') { //if paragraph says "Show" change to "Hide"...
$('.showOnlyChoose').html('Hide');
}
else $('.showOnlyChoose').html('Show'); //...otherwise change "Hide" to "Show"
})
EDIT: Added "Show"/"Hide" functionality.
If you want to select elements by its content you can use $(selector).text()
$(".showOnlyChoose").click(function() {
$("ul li").each(function(){
if($(this).text() != 'Taken') {
$(this).hide();
}
});
});
If you want to select by class:
$(".showOnlyChoose").click(function() {
$("ul li").each(function(){
if(!$(this).hasClass("Choose") {
$(this).hide();
}
});
});
OK, I have a list of <li>s with some content in like so:
<div>
<ul>
<li><h4>...</h4><div>...</div></li>
<li><h4>...</h4><div>...</div></li>
<li><h4>...</h4><div>...</div></li>
<li><h4>...</h4><div>...</div></li>
<li><h4>...</h4><div>...</div></li>
<li><h4>...</h4><div>...</div></li>
<li><h4>...</h4><div>...</div></li>
</ul>
</div>
Using jQuery, the <div> is hidden. When one of the <h4>s is 'clicked' the <div> is made visible, and when clicked again is made invisible.
This all works fine except, when clicking on the <h4> in any <li> all of the <div>s are made visible.
How do I stop this happening? I only want the <div> in the same <li> that the <h4> that is clicked to be made visible.
This is my jQuery:
$(document).ready(function() {
$('div div').hide();
$('div h4').click(function(){
if($('div div').is(':hidden')) {
$('div div').show();
$('div li').addClass('open');
}
else {
$('div div').hide();
$('div li').removeClass('open');
}
});
});
you can also use the 'siblings' selector
$(document).ready(function() {
$('div div').hide();
$('div h4').click(function(){
$(this.parentNode).toggleClass('open');
$(this).siblings('div').toggle();
});
});
$(document).ready(function() {
$('div div').hide();
$('div h4').click(function(){
if($(this).parents('div').is(':hidden')) {
$(this).find('div').show();
$(this).addClass('open');
}
else {
$(this).parents('div').hide();
$(this).removeClass('open');
}
});
});
Try this:
$(document).ready(function() {
$('div div').hide();
$('div h4').click(function(){
var $li=$(this).closest('li');
var $innerDiv=$li.find('div')
if($innerDiv.is(':hidden')) {
$innerDiv.show();
$li.addClass('open');
}
else {
$innerDiv.hide();
$li.removeClass('open');
}
});
});
The click handler function is using the normal $('foo') which is looking through the global document. I'd bet the solution involves some use of this, referring to the actual specific h4 element that has been clicked on, not to "everything in the document".
By selecting $('div div') you are selecting all divs that are children of other divs. This works for your initial hide, since you are hiding all the divs, but in the if statement you probably want something more like $(this).next()
The following should work as your click event for $("div h4").click(...).
$(this.parentNode).toggleClass("open").children("div").toggle();
I'd suggest .siblings().first() to just affect the first sibling jQuery finds.