I'm working with someone else html else I would of approached this differenty, but I'm trying to create a simple accordion from it.
The problem is it only slides show the first lot of div, it should find its parent div and slide show.
JS
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:first').slideToggle( "slow", function() {});
});
HTML
<h3 class="jqueryheading" style="cursor:pointer">Heading One</h3>
<div style="display:none;">
<p><img src="one.jpg"/></p>
<p><img src="two.jpg"/></p>
</div>
<h3 class="jqueryheading" style="cursor:pointer">Heading Two</h3>
<div style="display:none;">
<p><img src="three.jpg"/></p>
<p><img src="four.jpg"/></p>
</div>
Any ideas why this is happening?
Targeting the parent, then all DIV's gets you all the DIV's as they are children of the same parent, just target the next() DIV instead
$('h3.jqueryheading').click(function () {
$(this).next('div').slideToggle("slow");
});
FIDDLE
You can use next to target the next element
$('h3.jqueryheading').click(function() {
$(this).next().slideToggle( "slow", function() {});
});
Or the next div tag, if you want to be specific
$('h3.jqueryheading').click(function() {
$(this).next('div').slideToggle( "slow", function() {});
});
FIDDLE
Only one issue you have to use the :first-child or :eq(0)
$('h3.jqueryheading').click(function() {
$(this).parent().find('div:eq(0)').slideToggle( "slow", function() {});
});
Related
I want creating a website with some small news on the start-page. I show only the pics and show the headline and a small sentence with an hover-effect. Unfortunately I have no experience with jQuery and my code doesn't work.
$(document).ready(function () {
$(this).removeClass("#news-container .newscontent")
});
$(document).ready(function () {
$("#news-container img").hover(function () {
$(this).addClass("#news-container .newscontent");
}, function () {
$(this).removeClass("#news-container .newscontent");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you want to toggle some class or the visibility of some childs with jquery the dom stucture is key. Let's assume you got the following structure:
<div class="newscontent">
<img class="image" src="...">
<div class="text">Some text</div>
</div>
The following code registers for the hover event on every image within an element with a newcontent class. The image with the hover $(this) searches for the next element with a text class and toggles the visibility.
$('.newscontent img').hover(function(){
if ( $(this).next('.text').css('visibility') === 'visible' ){
$(this).next('.text').css('visibility', 'hidden');
}else{
$(this).next('.text').css('visibility', 'visible');
}
});
You can find a full working example here:
https://jsfiddle.net/3xy8ar96/1/
I want to move some h3 tags from top div to bottom div and the opposite via click event.
Everything works just fine until I click on a recently moved element to see the opposite action.
For example, I click on Item 1. it goes to bottom div. Again click on Item 1, it doesn't work. Why?
$("document").ready(function() {
$("div#top h3").click(function(e) {
$(e.target.tagName + "#" + e.target.id).detach().appendTo("div#down");
});
$("div#down h3").click(function(e) {
$(e.target.tagName + "#" + e.target.id).detach().appendTo("div#top");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top">
<h1>Top</h1>
<h3 id="th3-1">Item 1</h3>
<h3 id="th3-2">Item 2</h3>
<h3 id="th3-3">Item 3</h3>
</div>
<div id="down">
<h1>Down</h1>
<h3 id="dh3-1">Item 4</h3>
<h3 id="dh3-2">Item 5</h3>
<h3 id="dh3-3">Item 6</h3>
</div>
Since you want to have dynamic behavior based on the location of the element, you need to use event delegation
jQuery(function ($) {
$("#top").on('click', 'h3', function (e) {
$(this).appendTo("#down");
});
$("#down").on('click', 'h3', function (e) {
$(this).appendTo("#top");
});
});
Demo: Fiddle
You need to tell it to determine where the H3 is onclick and move accordingly.
$("document").ready(function() {
$("div > h3").click(function(e){
if($(this).parent().attr('id') == 'top')
$(e.target.tagName+"#"+e.target.id).detach().appendTo("div#down");
else
$(e.target.tagName+"#"+e.target.id).detach().appendTo("div#top");
});
});
Here's a demo.
I have a set of divs built like this with display:none; on .imageholder:
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
</div>
<!--and so on...-->
and this jQuery:
$('.parent').hover(
function() {
$('.imageholder').fadeIn('slow');
},function() {
$('.imageholder').fadeOut('slow');
}
);
When I hover the .parent div all related parent divs are displaying the image.
How can I make the hover state to work just for the actual hovered parent element?
Thanks!
function () {
$(this).find(".imageholder").fadeIn("slow");
}
You can use this in the .hover callback to refer to the hovered (parent) element.
$('.parent').hover(function () {
$(this).find(".imageholder").fadeIn("slow");
});
Try this fiddle you can use .find() method for to point div.
Just like
$(document).ready(function()
{
$('.parent').hover(function() {
$(this).find('.imageholder').fadeIn('slow');
},function() {
$(this).find('.imageholder').fadeOut('slow');
})
});
I am trying to study JQuery and I am quite shucked on figuring our how to target a child with a specific class name of a sibling div.
Here is the fiddle that I have written: http://jsfiddle.net/7c9F4/2/
HTML:
<div id="container">
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 1
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 1
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />
</div>
<div class="item-name">
Item 2
</div>
<div class="item-body">
<div class="body-inner hidden">
Body 2
</div>
</div>
</div>
</div>
JQuery:
$('.item .item-image').bind({
mouseenter: function() {
$(this).siblings('.item-body').children('body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('body-inner').hide();
console.log('Left');
}
});
I have tried to use the JQuery methods .next() and siblings() then try to get the child using the .children() method and it doesn't seem to work. :/
body-inner needs to have a . to indicate a class selector:
$(this).siblings('.item-body').children('.body-inner').hide();
Additionally, as of jQuery 1.7 the .on method is preferred to .bind:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
Alternatively, you could use hover and toggle():
DEMO jsFiddle
$('.item .item-image').hover(function(){
$(this).siblings('.item-body').children('.body-inner').toggle();
});
PS: you should remove class hidden on second .item-body as in jsFiddle
Or using only CSS:
DEMO jsFiddle
.item-image:hover ~ .item-body > .body-inner {
display: block;
}
Your code works fine. You're just missing . to target class body-inner
$(this).siblings('.item-body').children('.body-inner').hide();
// ------------------------------------- ^ here
Also, you should use .on() instead of .bind(), final code look like:
$('.item .item-image').on({
mouseenter: function() {
$(this).siblings('.item-body').children('.body-inner').show();
console.log('Entered');
},
mouseleave: function() {
$(this).siblings('.item-body').children('.body-inner').hide();
console.log('Left');
}
});
Updated Fiddle
I just notice that the above demo is not working properly for your second image because you've added class hidden for the second .item-body, you should remove it to make it works properly.
If you cannot modify your HTML code, then you can use .eq() and .removeClass() to remove class hidden from your second .item-body:
$('.item-body:eq(1)').removeClass('hidden');
Updated Fiddle
You can bind the mouse events on the outer div .item and use the .find() function in jQuery and navigate to the target element. Here is the js with .find()
$('.item').on({
mouseenter: function () {
$(this).find('.item-body .body-inner').show();
},
mouseleave: function () {
$(this).find('.item-body .body-inner').hide();
}
});
Here is the jsFiddle: http://jsfiddle.net/giri_jeedigunta/u45Ka/
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});