How to get a previous DIV with jQuery

How to get a previous DIV with jQuery - javascript

I want to animate an element (.item-i) after I click on another element(.item-1) which is following below. Now I don't know, how to get to this element.
I want only the exact above element animated, not both above, only the first element above.
I made an easy show up in http://jsfiddle.net/Eef4v/1/. The YellowBG is the "animation".
Here is my JS code:
$('.item-1').click(function() {
$(this).closest('.item-i').css( "background", "yellow" );
});
And my HTML Markup:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<ul id="Ul1" class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>

Use:
$(this).closest('.item-ii').prev().css( "background", "yellow" );
Working Demo
For Toggling background color:
$(this).closest('.item-ii').prev().toggleClass("highlight");
CSS:
.highlight {background: yellow;}
Demo with ToggleClass

Two ways to get .item-i to highlight.
$(this).parents('.level-1').find('.item-i').css( "background", "yellow" );
but if you have multiple .item-i classes under your .level-1 then they would all turn yellow.
Working Demo
You could also write a find algorithm that goes through each parent of .item-1 and finds the closest item-i
$('.item-1').click(function () {
$(this).parents().each(function(index,elem){
var query = $(elem).find('.item-i');
if(query.length > 0)
{
query.first().css("background-color", "yellow");
return false;
}
});
});
Working Algorithm demo

Related

jQuery toggle text color from self and removing from others

I'm new to jQuery/js, and I'm trying to toggle colors on click with jQuery.
I need something like this:
When I click an item, it toggles a class to change color.
If I click an item once, it changes color. Then if I click another item it changes color, but the other items must return to their initial color.
I can manage to toggle each item color, but I'm unable to remove the class color from the others.
Only the <li> with the class submenu-toggler should change colors. The 2nd level ul should not have their lis changed.
The final code looks something like this:
$(".submenu-toggler a").click(function(){
$(this).siblings().removeClass('red');
$(this).toggleClass("red");
});
a {
color: gray;
}
.red {
color: red;
}
li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-nav-menu" class="menu-hide">
<li>Item1</li>
<li class="submenu-toggler">
Toggler<span></span>
<ul id="submenu-1" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
<li class="submenu-toggler">
Toggler<span></span>
<ul id="submenu-2" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Item6</li>
</ul>

I believe this is what you are looking for, by using .siblings() all what you have to do is to remove class .red from the siblings elements and then perform the toggle on the current clicked element
Update: its working now for other elements, note that I added a selector .red * to make sub-elements also colored in red:
$(".item").click(function(){
$(this).siblings().removeClass('red');
$(this).toggleClass("red");
});
li {
color: grey;
}
.red,
.red *{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item"><a>Item 1</a></li>
<li class="item"><a>Item 2</a></li>
<li class="item">
<a>Item 3</a>
<span>AA</span>
<ul>
<li>AA</li>
<li>AA</li>
</ul>
</li>
</ul>
<ul id="main-nav-menu" class="menu-hide">
<li class="item">Item1</li>
<li class="item submenu-toggler">
Toggler<span></span>
<ul id="submenu-1" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
<li>sub4</li>
</ul>
</li>
<li class="item">Item3</li>
<li class="item">Item4</li>
<li class="item submenu-toggler">
Toggler<span></span>
<ul id="submenu-2" class="main-nav-submenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li class="item">Item6</li>
</ul>

jQuery, toggle menu item

I have the following nav menu.
If I click h1, t1, t2, t3 need to toggle (hide or show), other things stay as it is.
If I click h3, t6, t7, t8 need to toggle, other things stay.
Basically, h1, h2, h3 is the header and rest is children.
$(document).ready(function() {
/* In mobile menu, heading click, toggle sub */
$('.slicknav_nav li.heading').click(function() {
//$(this).find('ul').slideToggle();
$('.slicknav_nav li:not(.heading)').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="heading">h1</li>
<li class="first">t1</li>
<li class="">t2</li>
<li class="">t3</li>
<li class="heading">h2</li>
<li class="first">t4</li>
<li class="">t5</li>
<li class="heading">h3</li>
<li class="first">t6</li>
<li class="">t7</li>
<li class="">t8</li>
</ul>
I have made some code. Obviously, it toggles other peer as well. Is it a way to only toggle the current item's "children"?

You can use nextUntil of jQuery method like below.
$(this).nextUntil(".heading").toggle();
Example:
$(document).ready(function() {
/* In mobile menu, heading click, toggle sub */
$('.slicknav_nav li.heading').click(function() {
$(this).nextUntil(".heading").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slicknav_nav">
<li class="heading">h1</li>
<li class="first">t1</li>
<li class="">t2</li>
<li class="">t3</li>
<li class="heading">h2</li>
<li class="first">t4</li>
<li class="">t5</li>
<li class="heading">h3</li>
<li class="first">t6</li>
<li class="">t7</li>
<li class="">t8</li>
</ul>

One thought would be to wrap each heading group in a div, then wrap the children in another div inside that one. Could do something like this for layout:
<ul>
<div class="headingContainer">
<li class="heading">h1</li>
<div class="childContainer">
<li class="first">t1</li>
<li class="">t2</li>
<li class="">t3</li>
</div>
</div>
<div class="headingContainer">
<li class="heading">h2</li>
<div class="childContainer">
<li class="first">t4</li>
<li class="">t5</li>
</div>
</div>
<div class="headingContainer">
<li class="heading">h3</li>
<div class="childContainer">
<li class="first">t6</li>
<li class="">t7</li>
<li class="">t8</li>
</div>
</div>
</ul>
Then, in your jQuery, you could use the .siblings() selector to select the sibling div in the dom. Run toggleClass("heading") on the selection and that should do the trick if I'm understanding this correctly.

Display parent UL and for the root parent both UL and LI node

<ul id="ul_Book1">
<li id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
<li id= "li_Chap1"> Chapter 1</li>
<ul>
<li id="li_Sect11" > Section 1.1 </li>
<li id="li_Sect12" > Section 1.2 </li>
<li id="li_Sect13" > Section 1.3 </li>
</ul>
</ul>
<ul id="ul_Chap2">
<LI id= "li_Chap2"> Chapter 2</LI>
<ul>
<li id="li_Sect21" > Section 2.1 </li>
<li id="li_Sect22" > Section 2.2 </li>
<li id="li_Sect23" > Section 2.3 </li>
</ul>
</ul>
<ul id="ul_Chap3">
<li id= "li_Chap3"> Chapter 3</li>
<ul>
<li id="li_Sect31" > Section 3.1 </li>
<li id="li_Sect32" > Section 3.2 </li>
<li id="li_Sect33" > Section 3.3 </li>
</ul>
</ul>
function menuDisplayPath(li_id) {
var idVal = li_id;
var $obj = $('li').filter(function () { return $(this).attr('id') == idVal; }).parents();
$($obj.get().reverse()).each(function () {
if ($(this).is("li")) {
$(this).find('li').each(function () {
$(this).show();
});
$(this).find('Ul').each(function () {
$(this).show();
});
}
});
}
When a LI node is selected , say "Section 3.2" , I would like to expand/show only "Book1-- Chapter3 -- Section 3.2" and rest of the UL nodes under Book1 should not expand.
But my function menuDisplayPath(li_id) is expanding all the UL under Book1 and also display all LI's. What am I missing in the function.

Assuming all is expanded on load.
First, I corrected many missing double-quotes and extra spaces...
So here is your HTML:
<input type="reset" id="reset" value="Expand all">
<ul id="ul_Book1">
<li id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
<li id="li_Chap1"> Chapter 1</li>
<ul>
<li id="li_Sect11"> Section 1.1 </li>
<li id="li_Sect12"> Section 1.2 </li>
<li id="li_Sect13"> Section 1.3 </li>
</ul>
</ul>
<ul id="ul_Chap2">
<li id="li_Chap2"> Chapter 2</li>
<ul>
<li id="li_Sect21"> Section 2.1 </li>
<li id="li_Sect22"> Section 2.2 </li>
<li id="li_Sect23"> Section 2.3 </li>
</ul>
</ul>
<ul id="ul_Chap3">
<li id="li_Chap3"> Chapter 3</li>
<ul>
<li id="li_Sect31"> Section 3.1 </li>
<li id="li_Sect32"> Section 3.2 </li>
<li id="li_Sect33"> Section 3.3 </li>
</ul>
</ul>
</ul>
And here is the way to hide the other chapters on click of a li with a section id:
$(document).ready(function(){
$("#ul_Book1").on("click","ul ul li", function(){
$(this).parent().parent().siblings("ul").each(function(){
$(this).hide(); // Hides all other chapter
});
});
$("#reset").on("click",function(){
$("#ul_Book1").children("ul").each(function(){
$(this).show();
});
});
});
Fiddle
Now... Can't tell you how to display the <section> since I didn't see the relevant HTML.

The following worked for me:
function open($li) {
$('.content').hide();
$li.children().show();
if ($li.hasClass('section')) $li.parent().parent().children().show();
}
// test driver
$(document).ready(function() {
$('li').click(function (e) { open($(this)); e.stopPropagation(); });
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="book">
<li class="chapter">Chapter One
<ul class="chapter content">
<li class="section">Section One<br><i class="content">1.1 contents</i></li>
<li class="section">Section Two<br><i class="content">1.2 contents</i></li>
</ul>
</li>
<li class="chapter">Chapter Two
<ul class="chapter content">
<li class="section">Section One<br><i class="content">2.1 contents</i></li>
<li class="section">Section Two<br><i class="content">2.2 contents</i></li>
</ul>
</li>
</ul>
Basically you put the section element you want to be open inside the open($li) function.
You should also only put <li> elements inside <ul> elements.
I hope this is what you wanted.

How to toggle only header element not the list

I have this function that expands the <ul> and hides it after it is pressed.But when i press on <li> it will also close or expand. How do I make it to toggle only when the the <h4> is clicked ?
$('.category ul').hide();
$('.sub').click(function() {
$(this).find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
Thanks in advance.

Changes made
► changed $('.sub').click(function() { to $('.sub h4')
► changed $(this).find('ul') to $(this).next()
Working Demo
$('.category ul.archive_posts').hide();
$('.sub h4').click(function() {
$(this).next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>

Change the binding to the h4, then target the next ul.archive_posts for sliding.
$('.category ul').hide();
$('h4').click(function() {
$(this).next('ul.archive_posts').slideToggle();
});
See it working in this JS Fiddle: https://jsfiddle.net/rwvdf8ys/1/
Hope that helps.

The problem is $('this').find('ul').slideToggle();
'this' represents the obj that is cals the function. In this case it is h4. H4 has noe ul, so you cant find it. but you can find ul on $('.sub')
Here is ann example
$('.category ul').hide();
$('h4').click(function() {
$('.sub').find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4 id="foo"><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
js fiddle:
https://jsfiddle.net/8hvc4cfh/

You might use the siblings('ul') selector to find and close the neighbour ul. While $(".sub h4") limits the clickable elements to your h4.
$('.category ul').hide();
$('.sub h4').click(function() {
console.log('test');
$(this).siblings('ul').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>

You can try this.
$('li.sub h4').click(function() {
$(this).next().slideToggle();
});

open the first section when page loads

HTML:
<li class="page_item ">
A
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
</ul>
</li>
<li class="page_item ">
B
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
<li class="page_item ">
C
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
JS:
$('.page_item').click(function() {
var that = this;
$('.page_item').each(function() {
if (that == this) return true; //continue
$('.children:not(:hidden)', this).slideToggle();
});
$('ul.children', this).slideToggle();
});
Online demo: http://jsfiddle.net/kHLuR/1/
How can I make the first section li opened by default?

Variant #1 Pure CSS solution:
.page_item:first-child .children {
display: block;
}
Demo: http://jsfiddle.net/dfsq/kHLuR/7/
Note: :first-child works in IE8+. If you need to support older version you can give another class to your first li, e.g: <li class="page_item page_item-first"> http://jsfiddle.net/dfsq/kHLuR/9/
Variant #2. Trigger click event on the first .page_item:
$('.page_item').click(function () {
// ...
})
.filter(':first').click();
Demo: http://jsfiddle.net/dfsq/kHLuR/8/

Add this code to simulate a click event when the page is loaded: LIVE DEMO
$(document).ready(function () {
$('a').eq(0).trigger('click');
});

You can use jQuery's .ready() to execute code immediately after the page loads.
Take a look at http://api.jquery.com/ready/

Develop Reference

JavaScript is the programming language of the Web.

How to get a previous DIV with jQuery - javascript

Use: $(this).closest('.item-ii').prev().css( "background", "yellow" ); Working Demo For Toggling background color: $(this).closest('.item-ii').prev().toggleClass("highlight"); CSS: .highlight {background: yellow;} Demo with ToggleClass

Related

jQuery toggle text color from self and removing from others

jQuery, toggle menu item

Display parent UL and for the root parent both UL and LI node

How to toggle only header element not the list

open the first section when page loads

Categories

Resources