One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/
How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.
In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.
I think you need to use $(this) inside the click function rather than $('.lol')
demo
I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.
Related
I have two divs - one panel div that controls what shows on the other div. The problem is I have to apply a 'selected' class when a panel is active and also when the sub items under the panel is active as well. Right now, it does not "toggle" the selected class when active. This is what I have so far...
jQuery
$('.options-display .options-list').hide();
$('#option-1').show(); // change to whatever is shown first on page
$('.collapse p').click(function(){
$(this).toggleClass('.selected');
var target = '#' + $(this).data('target');
$('.options-list').not(target).hide();
$(target).show();
});
jsfiddle
https://jsfiddle.net/peyton_fields98/48d8zut7/
It is working as written, perhaps not as intended. There are two aspects which may not be obvious that led to your confusion.
First, this is a common typo that I have made as well, when using a class name in the toggle (or addClass or removeClass) make sure you do not include the . for the selector
//$(this).toggleClass('.selected');
$(this).toggleClass('selected');//should be this
// ^no `.`
To note: using this approach still leaves the original "selected" class intact. Perhaps you should preface this line of code with
$('.collapse .selected').removeClass('selected');
Second, the this binding in the click callback is going to be the element clicked, and in your example when selecting a sub item, it is the <p> element. Perhaps the selected class should be on the parent div in those cases if you are wanting to style the entire section. It was hard to tell as you left out the styling for the selected class.
I am new to Javascript and am having a few issues with my toggle menu:
1) I set the sub links to display:none; but they are still displaying anyway. I need them to be hidden on page load.
2) When clicking one of the main links, it toggles both main links instead of just the one clicked on. What do I need to add so that only the clicked link opens?
http://jsfiddle.net/musiclvr86/5otvoxho/
Bit of hack
$(document).ready(function(){
$('.sub').slideToggle(0);
$('.main').click(function(){
$(this).nextUntil(".main").slideToggle('fast');
});
});
and remove the line from your css
.dark-link.sub {display:none; }
http://jsfiddle.net/5otvoxho/4/
When you call it like this:
$('.sub').slideToggle('fast');
You're targeting every element that has a .sub class, so all of them will toggle. To fix it, you have to subject the selection to the elements relative to the clicked one using this. Since, by your structure they are siblings, not parent/children, you may use the .nextUntil() method from Jquery:
Updated Fiddle
$(this).nextUntil(".main").slideToggle('fast');
This will select every subsequent siblings, until it finds another .main
I am using ImageFlow SEE i want to add div on Top of Image once images clicked and Slides into Center.
I tried checking js file but MoveIT() function is called so many times in js and m not able to identify ,
t.wrap('<div class="f1_card"></div>');
when should i write to wrap div around image.
Thanks,
You can use the prepend() function of jquery. You just need to select the image element and then call prepend function. See the example:
$('.target_image').prepend('<div class="f1_card"></div>');
This will be ok if you want to add an element if you want to add prior to an element. But if you want to wrap an element with a div then you have to use wrap() function.
$('.target_image').wrap('<div class="f1_card"></div>');
And obviously you have to put this code above within the click function or similar event you want. see the example:
$('.target_image').on('click', function(){
$(this).prepend('<div class="f1_card"></div>');
});
Here div with class 'f1_card' will be the parent class of your target_image element. Hope this will help you.
If you're using an animation function, perhaps you could try something like this.
$('.myimage').click(function () {
$(this).animate({
/*.do stuff...*/
}, 'slow', function (){
$(this).prepend('<div class="f1_card">my content here</div>');
});
});
This works as follows. When you click your image, it will perform your jquery animation. Once the correct animation has been performed the function will then, at the destination (in this instance, the clicked div) prepend an element. According to the API documentation this will "insert content, specified by the parameter, to the beginning of each element in the set of matched elements."
You could center the div and use z-index in css.
How can i execute the action only on the div,when i have multiple div with same class
http://jsfiddle.net/kent93/Qw7bw/
when the mouse enter one div , the other div also will have action , how can i solve this
i want only the div that my mouse goes in take action , not the other, what best solution?
Change the selector of each position to: $(this).children(".class")
for example the code $(".fromTopToBottom") will change to $(this).children(".fromTopToBottom")
Demo: http://jsfiddle.net/Qw7bw/10/
very simple, use $(this), for example
$('.mydivclass').mouseover(function(e){
$(this).css('color','gray'); // Current element
});
If divs are nested then you should use e.stopPropagation() to stop the event bubling.
What you need is a "current" div concept.
At the beginning of mouseenter handler:
$(".trbl").removeClass("current");
$(this).addClass("current");
In your case statement, $(".fromTopToBottom").css({...}) -> $(".current .fromTopToBottom").css({...})
For the effect check out http://jsfiddle.net/Qw7bw/7/
Use $(this).find(x) rather than $(x) directly when selecting ".fromTopToBottom" and similar classes. This allows jQuery to only select childs of the hovered element http://jsfiddle.net/Qw7bw/6/
Use $(this).children(".fromTopToBottom") instead of $(".fromTopToBottom").
This will select divs of the given class inside the element whose handler you are writing.
Say i have 10 small images that i want to use as tooltips.
Im assinging them all the same class, '.helper'
Im selecting helper, then calling
mouseenter(function() { $(".helper").stop(false,true).fadeIn(); })
I then want a div to popup, containing some text. This works fine if there's only one tooltip on the page, but as soon as there is more than one, whenever i hover over one, they all appear at the same time.
Have i got something fundamentally wrong?
Comments appreciated.
Thx
Use this as the selector inside instead of the .helper selector again:
$('.helper').mouseenter(function() {
// "this" now refers to the image that is being hovered...
$(this).stop(false, true).fadeIn();
});
If you're wondering what the problem was, it was that when you called
$(".helper")
within your function, you were getting all the elements with class helper, in stead of just the single element you wanted.