We Keep Coding

Display following 2 elements on button click

I have a ul li list.
On page load I want to hide all elements with class hide and on add more button i want to display next 2 elements and so on.
$(function() {
$('.hide').hide();
$('#add_more').on('click', function() {
// show
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="add_more">Add next 2</button>
<ul>
<li class="show">1</li>
<li class="show">2</li>
<li class="hide">3</li>
<li class="hide">4</li>
<li class="hide">5</li>
<li class="hide">6</li>
<!-- Other elements -->
<li class="hide">n</li>
</ul>

To achieve this you can retrieve the last currently shown elements, then use slice() to get the following two and display them. Try this:
$(function() {
$('#add_more').on('click', function() {
$('.show:last').nextAll().slice(0, 2).toggleClass('show hide');
})
})
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="add_more">Add next 2</button>
<ul>
<li class="show">1</li>
<li class="show">2</li>
<li class="hide">3</li>
<li class="hide">4</li>
<li class="hide">5</li>
<li class="hide">6</li>
<!-- Other elements -->
<li class="hide">n</li>
</ul>

Make sub nav slidedown and slideup toggle

Here's what I'm trying to do:
Create a navigation with a sub-nav or child page.
When the user clicks on about, I want the about to toggle the Bob li.
It should slide down and slide up when clicked on and off of about.
$(document).ready(function() {
$("#grab").click(function() {
$(".sub-nav").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li id="#grab">About
<ul class="sub-nav">
<li>Bob</li>
</ul>
</li>
<li>Contact</li>
<li>Faqs</li>
</ul>

Your HTML is wrong you have a hashtag before grab id="#grab" it should be id="grab" by default the li contain "Bob" will be show to resolve this issue, add display:none; to the ul either through a class or inline
$(document).ready(function() {
$("#grab").click(function() {
$(".sub-nav").stop().slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li id="grab">About
<ul style="display:none" class="sub-nav">
<li >Bob</li>
</ul>
</li>
<li>Contact</li>
<li>Faqs</li>
</ul>

The # is used to reference id, in your tag you're seting the id as #grab, and in your jquery you're setting the .click() event to the class grab.
Then you'll need to change your <li> id to grab:
<li id="grab">
You can add display: none to your <ul>. In that way, when the page load, the sub-nav starts hidden:
You can set this on the tag:
<ul class="sub-nav" style="display: none;">
Or in your css:
.sub-nav{
display: none;
}

toggleclass active doesn't work properly

I want the menu to work like this. When you click Main1 it becomes active and the list will show, when you click it again the list will hide. When Main1 is active and you click Main2, then the Main1 should be inactive and Main2 active.
But my Javascript doesn't seem to make it work well. It makes the Main1 inactive when you click Main2 and the other way, but if you click on any of the active Main it doesn't become incactive. Please help
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul >
</div>
Javascript
$(' .list_item .lvl0').click(function(){
$(".list_item.active").removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Try this,
$('.list_item .lvl0').click(function(){
$('.directory-section-list .active').removeClass('active');
if ($(this).parent().hasClass('active'))
{
$(this).parent().removeClass('active');
}
else
{
$(this).parent().addClass('active');
}
});
$('.list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Please try this
HTML
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
</div>
Java Script
$(' .list_item .lvl0').click(function () {
$(' .list_item .lvl1').parent().removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function () {
$(' .list_item .lvl0').parent().removeClass("active");
$(this).parent().toggleClass('active');
});

Sorry but your HTML List had a couple of errors the
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
will never be closed...
its all about the HTML Structure - i've done another change -> check the HTML Structure of this JS Fiddle: http://jsfiddle.net/marco_rensch/hzu76hgt/32/

I think you want something like this?
$(document).ready(function(){
$('.maindiv').hide();
$( "button" ).click(function() {
$('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300);
});
});
div {
background-color: green;
color: white;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="show" data-link="main1">Main1</button>
<button class="show" data-link="main2">Main2</button>
<div>
<div class="maindiv" data-link="main1">
<h1>This is main1</h1>
</div>
<div class="maindiv" data-link="main2">
<h1>This is main2</h1>
</div>
</div>

Well Thank you all for your help. I managed to do it taking some of your examples and making it work my own way. Thank you again. I will post the Javascript fix.
$(document).ready(function() {
$('.li_lvl').click(function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
$('.directory-section-list .active').removeClass('active');
$(this).parent().addClass('active');
}
});
This will toggle class active of the parent .li_lvl which is the ul.list_item. If parent has class active it will remove class active. If any other list_item will have class active whilst you click on the other list_item, it will remove class active on the other list_item and make class active on the list_item you clicked.

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/

Select all parents with class

How can I select all parent elements that have one specific class?
For example:
<ul class="123">
<li>
<li>
<ul class="qwe">
<li>
<li>
<ul class="123">
<li class="select">
<li>
</ul>
</ul>
</ul>
How can I select all parent ul elements according to the li with class 'select' that have class '123'?

Is this what you're looking for?
$('.select').parents('.123');
Or maybe the more specific:
$('li.select').parents('ul.123');

How about an alternative using the has() method:
$("ul.123").has("li.select")
http://jsfiddle.net/6wB49/
has()
Description: Reduce the set of matched elements to those that have a
descendant that matches the selector or DOM element.

jquery-class-selectors
$('ul[class="123"] li.select');
//Or
$('li.select').parents('ul.123');

Hi,
You can also try this....
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul').bind('click', function () {
$(this).parent().each(function () {
alert($(this).attr('title'));
});
});
$('li').bind('onclick', function () {
$(this).parent().each(function () {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div title="div">
<ul class="123" title="1111_1">
<li title="test_1">Test 1</li>
<li title="test_2">Test 2</li>
<ul class="qwe" title="qwe">
<li title="qwe_1">ABC 1</li>
<li title="qwe_2">ABC 2</li>
<ul class="123" title="123">
<li class="select" title="123_1">XYZ 1</li>
<li title="123_2">XYZ 2</li>
</ul>
</ul>
</ul>
</div>
</form>
</body>
</html>
Thank you,
Vishal Patel