I have this html:
<div class="row">
<article>1</article>
<article>2</article>
<div class="load-work"></div>
<article>3</article>
<article>4</article>
<div class="load-work"></div>
<article>5</article>
<article>6</article>
</div>
What I want to do is to find nearest .load-work to clicked article. My current JS is:
$('article').each(function() { $(this).on('click', function() {
$('.load-work').each(function() {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).closest('.row').find('.load-work').show().addClass('loaded-work')
})
});
But it doesn't work - it finds each. Here's jsfiddle
You can try this with .nextAll() and :first:
$('article').on('click', function () {
$('.load-work').each(function () {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).nextAll('.load-work:first').show().addClass('loaded-work');
});
Fiddle
Or better one:
$('article').on('click', function () {
$('.load-work').each(function () {
$(this).hide().removeClass('loaded-work').html('');
});
if($(this).nextAll('.load-work:first').length){
$(this).nextAll('.load-work:first').show().addClass('loaded-work');
}else{
$(this).prevAll('.load-work:first').show().addClass('loaded-work');
}
});
Updated fiddle
Use following
$('article').each(function() { $(this).on('click', function() {
$('.load-work').each(function() {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).parent().closest('.row').find('.load-work').first().show().addClass('loaded-work')
})
});
Working fiddle=> http://jsfiddle.net/naw8W/3/
Related
<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
some link
some link
<div class="didattica">Didattica</div>
some link
<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
some link
<div class="didattica">Didattica</div>
some link
some link
<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
some link
I'd like to have .amministrazione, .didattica and all the links on display:none by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.
Here's what I have so far.. but it's not toggling the correct elements:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
http://jsfiddle.net/2rgqpzpt/
Use nextAll with the :first selector to target the appropriate divs:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
jQuery('.amministrazione, .didattica').slideUp();
jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
});
});
Fiddle 1
You could accomplish the same thing using nextUntil:
jQuery(function () {
var un= jQuery('.unique1, .unique2, .unique3, .unique4');
un.click(function () {
jQuery('.amministrazione, .didattica, a').slideUp();
jQuery(this).nextUntil(un).stop().slideDown();
});
});
Fiddle 2
You can change your code with
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = $(this).next('.amministrazione');
newTarget= newTarget.add(newTarget.next());
newTarget.slideDown()
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
I know this is a old question , but i've searched a lot .
i want to remove class after clicked outside the like body . here is my code :
Html
<div id="user-login-top">Enter</div>
<div id="user-login-wrapper" class="">visible</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
and here is the fiddle : Fiddle
Appreciate your help !?
Thx
It is because of the propagation of event.
When you click on user-login-top, the first click handle is triggered which is adding the class, then because of event propagation the handler attached to the document is triggered where it satisfies the if condition and removes the class.
One possible solution here is to use event.stopPropagation()
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").addClass("wide");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
Another is
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").toggleClass("wide");
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
<section>
<div class="click-text">
click inside and outside me
</div>
</section>
const concernedElement = document.querySelector(".click-text");
document.addEventListener("mousedown", (event) => {
if (concernedElement.contains(event.target)) {
console.log("Clicked Inside");
} else {
console.log("Clicked Outside / Elsewhere");
}
});
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
i need help with closing a div tag that has been expanded using jquery when a "read more" link has been clicked.
I can get one to work but not the rest.
I have attached a fiddle of my code:
http://jsfiddle.net/R9LvG/
This is the first time i have ever used jquery and i am very new to it so please bear with me.
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
As all those part of code are crappy, I would use :
$(document).ready(function () {
$('[class^="clickme"]').click(function (e) {
e.preventDefault();
$(this).next().slideToggle("slow");
});
});
Simpler, cleaner.
:)
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
})
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
JsFiddle
Also:
remove the '#' href to prevent it from jumping to the top of the page whenever it is clicked
<a class="clickme"><u><b>Read more</b></u></a>
To your clickme css class:
.clickme{cursor:poniter}
and then add a hover event:
.clickme:hover{color:#F00}
You close it 2 times which means it opens up again
Remove this at the end
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
Don't use dom ready functions more times in a single page.
Use Multiselector for click functions
For examples
$(document).ready(function () {
$("#selector1,#selector2, ... #selector-n").click(function () {
$(".content").slideToggle("slow")
});
Please use only one
$(document).ready(function () {
$(".clickme2, .clickme3, .clickme4, .clickme5").click(function () {
$(this).slideToggle("slow");
});
I didn't find any problem in you code.You modify the anchor tab by removing the href="" element, this will prevent moving the page to top each time you click on Read more.
<a class="clickme2" ><u><b>Read more</b></u></a>
And include the jQuery script in you page by copyng the below content in your page,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
And you can update the script for expanding and compressing as below since you are dealing with different divs with different classes,
<script>
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
</script>
How do I get the contents of a div using Jquery.
Here is my HTML:
<div class="DataRow" data-vendorid="67">
<div class="DataColumn" style="width: 60%;">
Barracuda
</div>
<div class="DataColumn" style="width: 20%; text-align: center;">
1
</div>
<div class="DataColumn" style="width: 20%; text-align: center;">
2
</div>
</div>
Here is my Jquery:
$(function () {
$('.DataRow').click(function () {
// get value: Barracuda
});
});
$(function () {
$('.DataRow').click(function () {
alert($(this).find(':first-child').text());
});
});
Or:
$(function () {
$('.DataRow').click(function () {
alert($(this).children().first().text());
});
});
If you need to get content of the clicked div it might help you.
$(function () {
$('.DataRow').click(function (event) {
alert(event.target.innerHTML);
});
});
DEMO 1
If you need to get only the first value:
$('.DataRow').click(function () {
var first = $(this).children().eq(0).html();
alert(first);
});
DEMO 2
If you need to get only "Baracuda", i.e. first div text, you could use innerHTML like this:
$(function () {
$('.DataRow').click(function () {
// get value: Barracuda
alert($(this).children("div")[0].innerHTML);
});
});
Here is an example.
You could also use this:
var value=$(".DataColumn").html();
To get the contents of the first child:
$('.DataRow').click(function () {
var first = $(this).children(":first").html();
});
To get the contents of the third child:
$('.DataRow').click(function () {
var third = $(this).children(":eq(2)").html();
});