I want to add a class to the preceding h3 element whenever any of the li under it being clicked, here is my html:
<div class="list">
<div class="marketing">
<h3> List I</h3>
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div class="operations">
<h3> List II</h3>
<div>
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
</div>
</div>
</div>
I tried to use the following script but in vain.
$('.list li').click(function () {
$(this)parent().prev('h3').addClass('active');
);
or either
$('.list li').click(function () {
$(this).parent().parent().children('h3')addClass('active');
);
Any idea?
use:
$(this).closest('div').prev('h3').addClass('active');
or
$(this).closest('div').siblings('h3').addClass('active');
Use this
$('.list li').click(function () {
$(this).parent().parent().prev().addClass('active');
});
DEMO
Related
I have a large number of DIVs on a page. Each being a container for an Unordered List. Above each DIV is a header text which consists of an element with an anchor.
e.g.
<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need to have all these DIVs hidden until the header (anchor) is clicked. If the user clicks header it should toggle show/hide DIV
How can I accomplish this in JQUERY in a way that I can have one onClick function for all the DIVS, possibly using an id to differentiate between divs?
<h2> Header 1 </h3>
function toggleDiv(id) {
}
but in JQUERY ?
SOLVED!!!!
<script>
$(function(){
$('.toggle-link').on('click', function() {
var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
});
});
</script>
<h2> Header 1 </h2>
<div id="div1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2> Header 2 </h2>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can use .toggle() in jQuery
toggle() method toggles between hide() and show() for the selected
elements.
function toggleDiv(id) {
$('#'+id).toggle();
}
where id is the parameter you pass
I have this nested list:
<ul>
<li>Item 1
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
What I need is: When I hover on a list item with class="active", this specific item 'Item 2B' together with its parent 'Item 2' to be colored red. 'Item 2A' and 'Item 2C' should NOT be colored.
I tried closest():
$("li").on("mouseenter", function () {
if ($(this).hasClass("active")) {
$(this).css("color", "red");
$(this).closest("ul").closest("li").css("color", "red");
}
});
Also parent().parent():
$(this).parent().parent().css("color", "red");
but of course they both color the whole 'Item 2' list item including all children 2A, 2B and 2C
You have to wrap each of the parent element into some html element like div or span.
Solution
HTML
<ul>
<li>Item 1
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li><span>Item 2</span>
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
JS
$("li").on("mouseenter", function () {
if ($(this).hasClass("active")) {
$(this).css("color", "red");
$(this).parent().parent().find("span").css("color", "red");
}
});
For this to work you will need to wrap the Item 2 text in a containing element, such as a span, otherwise the colour of all child elements will be changed too.
Then you can use .parent.closest('li') to get the li, before using children() to retrieve that span. Try this:
$("ul").on("mouseenter mouseleave", 'li.active', function(e) {
var $target = $(this).parent().closest('li').children('span');
$target.add(this).toggleClass('hover', e.type == 'mouseenter');
});
.active {
font-weight: bold;
}
.hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>Item 1</span>
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
<span>Item 2</span>
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>
<span>Item 3</span>
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
Note that the parent() call is required before calling closest() as closest() will match the current li element, which we do not want, so parent() is required to 'hop' over that element.
I'd probably do it by:
Using a standard :hover rule for the li itself
Using a class, not direct styling, for its parent li
Re-asserting the color for the subordinate ul elements (and thus their children) under the li with the class in the CSS
Like this:
$("li")
.on("mouseenter", function() {
if ($(this).hasClass("active")) {
$(this).parent().closest("li").addClass("has-active");
}
})
.on("mouseleave", function() {
if ($(this).hasClass("active")) {
$(this).parent().closest("li").removeClass("has-active");
}
});
li {
color: black;
}
li.has-active {
color: red;
}
li.active:hover {
color: red;
}
.has-active ul {
color: black;
}
<ul>
<li>Item 1
<ul>
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2A</li>
<li class="active">Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3A</li>
<li>Item 3B</li>
<li>Item 3C</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The class .notshow is hidden by default and i want the div with .notshow class to be visible after clicking the Show It text inside .shownow class.
I created a jquery code but its not working.
When i click .shownow div all hidden div with .notshow class go visible.
I only want a single div with .notshow class to be visible .
Example: I want to show single div with class .notshow to be visible and if i click another div the previous div should be hidden.
Its Similar to accordion.
*I searched alot on internet but can't find any solution similar to this.
Thanks for help
JsFiddle: https://jsfiddle.net/yoxo5kfh/3/
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
For this, we have to target which one you want to show, we can target it by combining..
$(this) - the element you click.
.closest - parent of both the element.
if you want some animation to use .slideDown insted of .show() and .slideUp insted of .hide()
$('body').on('click', '.shownow', function() {
$('.notshow').removeClass('nohide');
$(this).closest('.main').find('.notshow').addClass('nohide').toggle();
$('.notshow').each(function() {
if(!$(this).hasClass('nohide')){
$(this).hide();
}
});
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
try the code below. It will remove the class from all notshow and show the closest notshow to the clicked element
Updated fiddle here.
$('.shownow').click(function() {
$(".notshow").removeClass("show")
$(this).parent().next(".notshow").addClass("show");
})
A simple show/hide using JQuery. Try the below code, when you click on 'Show It', it finds the '.notshow' in the current parent container and accordingly hides the other containers:
$('.shownow').click(function() {
$(this).parents(".main:first").find(".notshow").toggle();
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.shownow h4 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
At last got somethig will be able for you
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<p class="shownow"><h4>Show It</h4><p>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
<script>
var elms = $( "div.notshow" )
$(document).on("click", ".title", function(event){
event.preventDefault();
$('.notshow').removeClass('show');
$(this).closest('div').next('.notshow').addClass('show');
});
</script>
let x = document.querySelectorAll('.main');
let list = document.querySelectorAll('.notshow')
let length = x.length;
for (let i = 0; i < length; i++) {
x[i].onclick = () => {
if (list[i].classList.contains('show')) {
list[i].classList.toggle('show');
} else {
for (let x = 0; x < length; x++) {
list[x].classList.remove('show');
}
list[i].classList.toggle('show'); // toggle/add
}
}
}
//let x = document.querySelectorAll('.main');
//let list = document.querySelectorAll('.notshow')
//let length = x.length;
//for (let i = 0; i < length; i++) {
// x[i].onclick = () => {
// list[i].classList.toggle('show'); // toggle/add
// }
//}
.notshow{
display:none;
}
.catlist{
list-style:none;
}
.show{
display:block;
}
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
I have update my answer, This will help you, just add it to your code.
<style type="text/css">
.notshow{
display: none;
}
</style>
<script type="text/javascript">
$(document).on('click','.shownow', function(){
var this_display = $
(this).parent().next('.notshow').css('display');
$('.notshow').css('display','none');
if(this_display=="block"){
$(this).parent().next('.notshow').css('display','none');
}else{
$(this).parent().next('.notshow').css('display','block');
}
});
</script>
So I have some tiles that are arranged using a list of UL and then several LI tags.
I want to have a button inside one of the LI tags that will hide the whole tile when pressed.
Not sure how to go about it. Something like - this.('li').hide() but i know thats wrong lol.
Many thanks.
<ul class="sortable grid">
<li>Item 1</li><button onclick="hidePane()">Dismiss</button>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script>
function hidePane(){
this.hide();
}
</script>
I want it to be dynamic. The intended use for this is to have a loop pulling in many tiles. So id like it to have a dismiss button on each and when clicked it will just hide tiles as you scroll.
Do not put elements outside li. In ul, first level elements inside should always be just li, so then inside the li you can put your button:
$('.sortable button').on('click', function() {
$(this).parent('li').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
<li>Item 1<button>Dismiss</button></li>
<li>Item 2<button>Dismiss</button></li>
<li>Item 3<button>Dismiss</button></li>
</ul>
A solution based on your code, using only JavaScript would imply to use event.target to get the current clicked button and its parent using parentElement and you would also use style.display = none; because there is no hide() method in pure JavaScript:
function hidePane(event) {
event.target.parentElement.style.display = 'none';
}
<ul class="sortable grid">
<li>Item 1<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 2<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 3<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 4<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 5<button onclick="hidePane(event)">Dismiss</button></li>
<li>Item 6<button onclick="hidePane(event)">Dismiss</button></li>
</ul>
You can try this:
Html code:
<ul class="sortable grid">
<li>Item 1 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 2 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 3 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 4 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 5 <br /><input type="submit" onclick="hidePane(this);"></li>
<li>Item 6 <br /><input type="submit" onclick="hidePane(this);"></li>
</ul>
JS code:
function hidePane(ref) {
$(ref).parent().hide()
}
It would be better if you do it by JQuery
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<ul class="sortable grid">
<li>Item 1<button class="dismiss"> Dismiss</button></li>
<li>Item 2<button class="dismiss"> Dismiss</button></li>
<li>Item 3<button class="dismiss"> Dismiss</button></li>
<li>Item 4<button class="dismiss"> Dismiss</button></li>
<li>Item 5<button class="dismiss"> Dismiss</button></li>
<li>Item 6<button class="dismiss"> Dismiss</button></li>
</ul>
Here is your JS
$(".dismiss").click(function () {
$(this).parent().hide();
});
I would recommend you to not to use html onclick() since it was considered a bad practice
[Why is using onClick() in HTML a bad practice?
You have to use jQuery: select the item by the id and then use the hide method.
$('#id_of_li').hide();
Try this code. It allows you to hide the li containing the button.
$("#hide").on('click',function(){
hidePane($(this).parent());
});
function hidePane(parent){
parent.hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortable grid">
<li>Item 1 <button id="hide">Dismiss</button></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
How to wrap all ul elements in div with JQuery automatically?
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
But what I want:
<div id="my_uls">
<div>
<ul>
<li>Item one</li>
<li>Item two
<div>
<ul>
<li>Item one of two</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
You need to use .wrap():
$(function() {
$("ul").wrap("<div />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
Just use wrap function for this
<scrpt>
$(document).ready(function(){
var myuls = $("#my_uls").find("ul");
for(var i=0;i<myuls.length;i++){
$(myuls[i]).wrap("<div></div>");
}
});
</script>
$('#my_uls ul'), This will refer all your ul inside the div.
if you need the 1st ul only
$('#my_uls ul:not(#my_uls ul ul)').