JQuery hide/show not working as it should - javascript

I'm trying to make a drop down menu and have it open sub menus on click and close them on click, but I cannot even get it to hide my submenu to start off with on a click.
Here is my JQuery code:
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").hide();
});});
And this is my html code that I am trying to get to hide/show
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
Am I doing something wrong on the jquery end? Because from what I have looked on here this should be working, but it's not.

Using toggle() may be more effective:
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});
Example Fiddle

$(document).ready(function(){
$("#timeli").on('click', function()
{
$("#timeUlSub").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>

#timeUlSub is part of the #timeli li. Move it outside the li. In addition, jquery .slideToggle() is a better method than .hide().
Check if you have Jquery linked.

Try this out for conditional usage :
$(document).ready(function(){
$("#timeli").on('click', function(){
if($("#timeUlSub").is(':hidden')){
$("#timeUlSub").show();
} else {
$("#timeUlSub").hide();
}
});
});

<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub{
display:none;
}
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});});
jsfiddle: http://jsfiddle.net/shellyjindal/rxb56emp/

Related

Function click on li element

I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/

.click() functionality when clicking elements

Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});

On hover closing specific list element

<ul class="open-close1" id="reportType">
<li class="active">
<div id="subcats">
<ul>
<li>
<img class="loading-spinner" src="store/$vendorSettingsDTO.vendorId/assets/themes/$vendorSettingsDTO.skinname/images/loading.gif" height="18"/>
</li>
</ul>
</div>
</li>
</ul>
<script>
jQuery(document).ready(function($){
jQuery.getJSON('subcat.ajx?vid=$vendorSettingsDTO.vendorId&cid=$catid', function(data) {
//Render subcatergories using Mustache.js (https://github.com/janl/mustache.js)
var subcat_mustache =
'<ul>\
<a style="font-size:14px; font-weight:bold; color:#0073B3;" class="opener"href="{{URL}}">{{description}}</a>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>';
var partials = {
child:
'<li>\
<a class="opener" href="{{URL}}">{{description}}</a>\
<div class="subnav1 hidden">\
<ul>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>\
</div>\
</li>'
}
jQuery("#subcats").html(Mustache.render(subcat_mustache, data, partials));
});
});
</script>
<script>
$(document).ready(function() {
$(".open-close1").hover(function (){
//$(this).children('.subnav1').toggle();
//console.log("$(this).children('.subnav1') "+$(this).children('.subnav1'));
//$(".subnav1", this).toggle();
$(this).find('.subnav1').toggle(); // p00f
});
});
</script>
This is the code I have in case of my category page. I implemented a logic to toggle the block on hover. But entire list of categories is toggling instead of specific list on which it is hovered.
Please help me its IRRITATING me. Thanks a lot for your help in advance.
I assume your rendered html like below;
<ul class="open-close1" id="reportType">
<li class="active">
<div id="subcats">
<ul>
<li>
<a class="opener" href="#">Item1</a>
<div class="subnav1 hidden">
<ul>
<li>Item1-1</li>
<li>Item1-2</li>
<li>Item1-3</li>
</ul>
</div>
</li>
<li>
<a class="opener" href="#">Item2</a>
<div class="subnav1 hidden">
<ul>
<li>Item2-1</li>
<li>Item2-2</li>
<li>Item2-3</li>
</ul>
</div>
</li>
<li>
<a class="opener" href="#">Item3</a>
<div class="subnav1 hidden">
<ul>
<li>Item3-1</li>
<li>Item3-2</li>
<li>Item3-3</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
You can use following js for above html structure;
$(".opener").hover(function (){
$(this).next().toggle();
});
Here is a working demo: http://jsfiddle.net/cubuzoa/EKu2q/
Edit: On your site, category section you mentioned loaded with ajax. So you need to run function after ajax load like below;
<script>
jQuery(document).ready(function($){
jQuery.getJSON('subcat.ajx?vid=$vendorSettingsDTO.vendorId&cid=$catid', function(data) {
//Render subcatergories using Mustache.js (https://github.com/janl/mustache.js)
var subcat_mustache =
'<ul>\
<a style="font-size:14px; font-weight:bold; color:#0073B3;" class="opener"href="{{URL}}">{{description}}</a>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>';
var partials = {
child:
'<li>\
<a class="opener" href="{{URL}}">{{description}}</a>\
<div class="subnav1 hidden">\
<ul>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>\
</div>\
</li>'
}
jQuery("#subcats").html(Mustache.render(subcat_mustache, data, partials));
$(".opener-parent").parent('li').hover(function (){
$(this).find('subnav1').toggle();
});
});
});
</script>
I have also give class name for upper categories as opener-parent and updated js code
Updated demo: http://jsfiddle.net/R9KLz/4/
Final Result: If you do not want to add opener-parent class, you can use following;
$("#subcats ul li").hover(function (){
if ($(this).find('.subnav1').first().find("ul").has("li").length) {
$(this).find('.subnav1').first().toggle();
}
});
Here is a working demo: http://jsfiddle.net/cubuzoa/R9KLz/5/
Something I noticed, I think you have an extra <div> in your list markup.
<ul class="open-close1" id="reportType">
<li class="active">
<div id="subcats">
<ul>
<li><img class="loading-spinner" src="store/$vendorSettingsDTO.vendorId/assets/themes/$vendorSettingsDTO.skinname/images/loading.gif" height="18"/></li>
</ul>
</div>
<!--</div>-->
</li>
</ul>
Also, I just a hunch, but I think you need to be more specific in which element inside of your class you want to talk to. For example, you have this:
$(this).find('.subnav1').toggle();
But I think you need something more along the lines of:
$(this).find('.subnav1 ul').toggle();
Or, if possible, you could give your list(s) some sort of hook to make it even easier to talk to.

How to apply toggle?

here is my code of html on which i have to apply togle
<div class="contact-links contact-info">
<ul>
<li class="contact-link-list toggle-sub"><a data-toggle-handler="contact-details-2" href="#">Agent Details</a>
<ul data-toggle-group="contact-details-2" class="senf hidden">
<ul style="float:left">
<li style="margin-right:20px;">Office hours</li>
<li style="margin-right:20px;">Products offered</li>
<li>Languages</li>
<li>Visit Agent Site</a></li>
</ul>
<ul style='float:left; margin-left:-20px;'>
<li>Mon-Fri 9:00AM-5:00PM</li>
<li>Auto, Home</li>
<li>English, Spanish</li></ul>
</ul></li>
</ul>
</div>
and here is my code of jquery
$(document).ready(function(){
$(".contact-link-list").click(function(){
('.senf').slideToggle("fast");
});
});
here is my jsfiddle - http://jsfiddle.net/n7U6b/
please suggest me where i am wrong
There is no element in your example with a class of senf. Also you are missing a $ before your selector:
$('.senf').slideToggle("fast");
Edit
Here is an updated fiddle from your example. You are still missing the $, and you have a stray closing </a> tag in there, but you also need to add a class of senf to the item you want to toggle. For example:
<ul data-toggle-group="contact-details-2" class="hidden senf">
$(document).ready(function(){
$(".contact-link-list").click(function(){
$('.senf').slideToggle("fast");
});
});
You just missed a $ sign on '.senf'
Plus where is the item with class senf?? I might have missed it!

How can I get the class of a parent element?

I would like to find the class of the parent element of the child with .current.
var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
but it always throws me undefined
NOTE: I don't know which a currently has .current which is why I have to use the .find() method.
Your code should already work, but it might be more reliable to access the property className instead:
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
This will work:
var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);
I'm simply transforming the found collection into a jQuery object again.
See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/
Ps.: If more than one a has class="current", only the first one will be retrieved.
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>

Categories