Just wondering if anyone can provide some basic advice on an accordion I'm trying to simplify. Got a working version, but it seems way overly complex. Here is my new JS.
$(document).ready(function() {
$("#themes li ul").hide();
$("#themes li").hover(function() {
$("ul").show();
}, function() {
$("li ul").hide();
});
The markup looks like this:
<ul>
<li>Tier 1
<ul>
<li>Tier 2</li>
<li>Tier 2</li>
</ul>
</li>
<li>Tier 1
<ul>
<li>Tier 2</li>
<li>Tier 2</li>
</ul>
</li>
</ul>
My script works alright. But it shows all of the child ul's when any parent li is hovered, and it hides all the child ul's when unhovered. Just not sure how I can get it to A.) Only .show the li > ul when that specific li is hovered. And B.) Hide the shown li > ul only when another one is hovered (not itself). Example + explanation would be especially helpful! Thanks!!
Why can't you use the JQuery UI Accordion. This will solve your problem. The js is and the html is very simple here
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
jQuery(document).ready(function(){
$('#accordion').accordion();
});
EDITED
The issue with your code is it hides and displays all the 'ul' components inside any 'li' components on hover of any one li. Here is the code to solve this issue, this will hide/show the 'ul' which comes inside the current 'li'
$(document).ready(function() {
$("#themes li ul").hide();
$("#themes li").hover(function() {
$(this).find("ul").show();
}, function() {
$(this).find("ul").hide();
});
});
Related
I have a simple open/close responsive menu that uses jQuery. The menu works just fine but the website I'm using it on is a simple single page site with different sections. My problem is the menu opens and closes when the user clicks the menu handle and I'd like it to close when the user clicks on a menu item also. I have very little experience in jQuery so I need help solving this problem.
The HTML:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
The jQuery:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
Thank you.
I think you need this:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
$('nav ul').removeClass('showing');
});
I also noticed your HTML structure is wrong...
The <li> should be child of <ul>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
Working fiddle ==> https://jsfiddle.net/osd4nn1n/
You can change the toggleClass to just toggle to hide the elements. To get the behavior you'd like, change your jQuery selector to:
$('.handle, nav ul a').on('click', function(){
$('nav ul').toggle();
});
I have a list I am trying to collapse and am having trouble once I get lower in the hierarchy. Here is my html:
<ul class="list">
<li>
<a>Categories</a>
<ul>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Heres my jquery
$( document ).ready(function() {
$('.list > li a').click(function(){
$(this).parent().find('ul').toggle();
});
});
And here is a jfiddle: http://jsfiddle.net/u7bczqup/
Once you click on Categories the Parents come down. When this happens, all the children of the parents are shown and not hidden. Why are these ones not hidden? Ive tried adjusting my jquery but that causes it to not work at all.
They are not hidden because jquery find searches any descendants below it and then you are toggling them, you should use children().
Try this:
$(this).parent().children('ul').toggle();
http://jsfiddle.net/u7bczqup/1/
https://api.jquery.com/children/
Give this a shot.
JS:
$( document ).ready(function() {
$('.list > li a').click(function(){
$(this).next('ul').toggle();
});
});
The issue with using .find() is that it is finding all the ul element. You can check this by adding this line: console.log($(this).parent().find('ul')); This will print all the ul tags it is "finding" to the console. Because it is finding all of them, it is toggling all of them.
You're searching for all unordered list elements in the method .find('ul') that are direct descendants.
It should be .find('ul:first-child') ore more precisely .children(ul:first) so it would be
$( document ).ready(function() {
$('.list > li a').click(function(){
$(this).parent().children('ul').toggle();
});
});
for more refer to jquery find method
The else condition of my if/else is not firing. The condition is for the li.catparent, so that if it is clicked, I can have certain code fired. If one of the other items without 'li.catparent' is clicked, then different code will be fired. Perhaps someone could tell me what I'm missing? My if/else statement is very simple, and I'm not sure why it isn't firing. I definitely missing something.
HTML:
<ul class="portal-filter categorylist" id="filter">
<li class="all"><a class="selected" href="#" data-filter="*">All</a></li>
<li class="category">Category 1</li>
<li class="category">Category 2</li>
<li class="catparent">
<span class="catparenttxt">
Category Parent
<span class="subnavarrow"></span>
</span>
<ul class="subcatlist">
<li class="category">Subcategory 1</li>
<li class="category">Subcategory 2</li>
<li class="category">Subcategory 3</li>
</ul>
</li>
<li class="category">Category 1 and 2</li>
</ul>
jQuery
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else{
console.log('category without parent clicked');
}
});
or
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else if(!$(this).hasClass('catparent')){
console.log('category without parent clicked');
}
});
Here's a Fiddle that seems to be working with the simple code.
Here's a fiddle with my entire project code included that shows it isn't working.
This issue appears to be related to the media boxes plugin that you have used. If you take the $('#grid').mediaBoxes({ ... }); part out of the broken JSFiddle you have provided, it works perfectly as expected. You can see this fix in the updated JSFiddle here.
To work around this issue, you need to handle the clicks on the a tags inside the list items as well:
$('ul.categorylist > li, ul.categorylist > li a').on('click', function() {
....
});
The reason is that the click-event is actually only triggered for the li.catparent; this is due to the anchor-elements inside the other lis, that consume the mouse click.
You can add a handler to those, too, to receive the event:
$('ul.categorylist li a').on('click', function(e) {
alert('a inside li clicked');
}
i've got a problem with getting my navigation bar to work. This probably is very easy to solve but i've been trying things for ages and can't get it to work. For CSS purposes i want the list item in the nav bar to get the class 'selected' when clicked and removed when a different nav bar item is clicked. For some reason it doesn't work. i'll show the code here:
<script type="text/javascript">
$('ul.navigation li a').click(function(){
$('ul.navigation li a').removeClass('selected');
$(this).addClass('selected');
});
</script>
I put this part in the <head>...</head>
This is the navigation bar which it's not having any effect on:
<div id="menuWrapper">
<nav>
<ul class="navigation underlinemenu" id="gooeymenu">
<li id="home" class="selected">Home</li>
<li id="work">Work</li>
<li id="services">Services</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
</nav>
</div>
Now when i go to the browser and inspect the element it doesn't show any indication of adding the class 'selected' to the clicked menu item. When i check the console it gives some sort of error about the $('ul.navigation li a').click(function(){ part of the javascript saying it isn't a function.
I hope this has explained my problem, i still think it's probably easy to solve but i've been stuck on this for an entire day so i hope anyone here can help me.
Always wire up your events within a .ready() function.
If you apply the .ready function to the document, you ensure that your events are wired up. Read here for a brief introduction on using $(document).ready()
//Wait for the DOM to load and be ready:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
//Find the navigation link that is actually with the 'selected' class.
$('ul.navigation li.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
The element you are adding the 'selected' class doesn't look right.
In your html markup, you have the <li class='selected'><a href=''> but in your javascript you are removing and adding the selected class on the a element.
So you want to do something like:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
$('ul.navigation li.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
Unless you meant to have the class on the a element, then just your initial HTML was wrong, and then Sergio's solution would work.
Here you have the "selected" class in the "LI" element
<ul class="navigation underlinemenu" id="gooeymenu">
<li id="home" class="selected">Home</li>
<li id="work">Work</li>
<li id="services">Services</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
but in your javascript you are removing and adding the "selected" class on the "A" element
So try this:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
$('ul.navigation li').removeClass('selected');
$(this).parent().addClass('selected');
});
});
I have several blocks of text separated into their own divs. I also have several links in a navigation bar that reference these divs with an anchor link. On click, I'd like to hide all other divs except the one referenced by the clicked link. I have:
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
So, when I click 'Link 3'. I'd like to hide all divs except #section3.
I'm fine actually hiding/showing each section of text using CSS, but I can't figure out how to use the link's href attribute to reference the div name.
Thanks for your help, and let me know if you need clarification of what I'm asking.
Try this:
$('#navbar a').click(function() {
$('div:not(#navbar)').hide();
$($(this).attr('href')).show();
return false; // You may or may not want this line.
});
You can see an example here.
You can use the anchor's .hash property as a selector, all you need to so is hide the divs you want first, like this:
$('#navbar a').click(function(e) {
$('.container > div').hide();
$(this.hash).show();
e.preventDefault(); //to prevent scrolling
});
This assumes you have the <div> elements you want to show in a container of some sort, like this:
<div class="container">
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
<div id="section4">Section 4</div>
</div>
You can test it out here.