I have a problem here HERE. I don't know why it doesn't work.
Let's look the following code to understand it better.
HTML
<div class="click">List 1</div>
<div class="information">Info 1</div>
<div class="click">List 2</div>
<div class="information">Info 2</div>
CSS
.information {
display:none;
}
JS
$('.click').click(function() {
$('.information').slideToggle('slow');
});
I tried one by one it doesn't work at all. Can you help me fix it?
Thanks
Your code does exactly what it should - it runs slideToggle on all .information tags.
If you just want the one right after the clicked item, you can do:
$(this).next('.information').slideToggle('slow');
Your selector inside the click callback must be specific to the element that was clicked.
$('.click').click(function() {
$(this).next('.information').slideToggle('slow');
});
WORKING JS FIDDLE DEMO
Related
I'm using an accordion style html code
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
with this jQuery script
$(function(){
$('.blog .accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.blog .accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
In the first accordion tab I'm using a fotorama slideshow.
The problem I'm facing is, that the 'style="display:none;' breaks/stops the execution of the slideshow. How can use the slideshow after toggling the accordion?
Regards
Peter
Try removing the inline style from there, and add a parent <div> which wraps all that, and then control the slideToggle from there, not on the accordion itself.
<div class="acc">
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
</div>
Also I'm not sure what your if is for but you can just use toggleClass()
Hail mary guess
Try:
<div class="accordion-panel"style="visibility:hidden;">content</div>
I think the plugin is trying to manipulate that css.
Do you have a demo I could look at? I might be able to give a better answer.
$(function(){
$('.accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
<div class="accordion-link">Link2</div>
<div class="accordion-panel" style="display:none;">content2</div>
<div class="accordion-link">Link3</div>
<div class="accordion-panel" style="display:none;">content3</div>
I didn't see any wrong with your code
I removed the inline style "display:none" and added this line of code in jQuery script
$('.accordion-panel').css('display','none');
This helps fotorama initialize and start - but with the wrong image size.
Adding this line of code to the click(function)
$(window).trigger('resize');
resolves the problem. Now it works.
I guys, let me start that if you have seen my problem on other post or reference redirect me to that. I couldn't find anything with my specific problem.
My problem is that i want to link actions from one child to a child on other parent like so:
<div class="parent1">
<i class="link1"></i>
<i class="link2"></i>
<i class="link3"></i>
</div>
<div class="parent2">
<div class="logo-case"></div>
<div class="logo-case"></div>
<div class="logo-case"></div>
</div>
I know the js is not right (duh) but i want to illustrate an ideia of what I'm trying to accomplish.
$('.parent1 i').each(function() {
$(this).click(function(){
$('**all** .logo-case').css("height", "0");
$(' **this** .logo-case').css("height", "100%");
)};
});
Now I want that the first "i.link1" gives height to the first "logo-case" no matter of the classes added to "logo-case" which means "link1" always affects the first "logo-case" and so on.
Thanks in advance for any response.
Check out this fiddle: https://jsfiddle.net/6jaj5L0y/1/
I think it achieves what you are trying to do.
$('.parent1 i').each(function(idx, el) {
$(this).click(function(){
$(".parent2 .logo-case").css({height: '0px'})
.eq(idx).css({height: '100px'});
});
});
I would like to bring a jQuery dragable div to the front when clicked. I read this post, and build the JsFiddle here, but it did not work. Am I missing something? Thanks!
Here is the jsfiddle I created, the elements are dragable and will be brought to front while dragging, but i could not bring them to front while just being clicked. Is there a conflict between z-index?
JSfiddle
Here is the code:
HTML
<div>
<div id="box1" class="front-on-click"></div>
<div id="box2" class="front-on-click"></div>
<div id="box3" class="front-on-click"></div>
<div id="box4" class="front-on-click"></div>
Here is the javascript:
$(document).ready(function() {
$('#box1,#box2,#box3,#box4').draggable({stack: "div"});
$('.front-on-click').click(function(){
$('.front').removeClass('front');
$(this).addClass('front');
});
});
Thanks!
I couldn't figure out the reason why it won't work, but I got it working by changing your code with the following-
$('.front-on-click').click(function() {
$('.front').css('z-index','0').removeClass('front');
$(this).addClass('front').css('z-index','100');
});
use this
$('.front-on-click').click(function(){
$(".front-on-click").each(function(){
$(this).css("z-index", "1");
$(this).removeClass('front');
});
$(this).css("z-index", "10");
$(this).addClass('front');
});
So, I have a simple code that I can't get it to work. I tried to find answers on the same topic here, but being new to jQuery all answers seem too complicated.
Anyways, what I want to do is have the same script run for different divs. After some reading here I managed to arrange the following code, but it doesn't seem to work.
<div id="mydiv1" onclick="handleClick(this)" style="position:relative; left:0px;">Div One</div>
<div id="mydiv1a" style="position:relative; left:0px;">Div One A</div>
<div id="mydiv2" onclick="handleClick(this)" style="position:relative; left:0px;">Div Two</div>
<div id="mydiv2a" style="position:relative; left:0px;">Div Two A</div>
<script>
$(document).ready(function(){
function handleClick(x) {
$(x.id + 'a').fadeToggle("slow");
}
}
</script>
What I want this to do is when I click #mydiv1, the function should run on #mydiv1a. And the same for #mydiv2. Thank you in advance for your help!
It's better to assign the handling within your script (not inline in html). Bonus for that is that you can use jQuery delegation, i.e. assign a click handler on the document body for a number of elements within the body. Furthermore, the styling should be in a css tag/css file where possible (why?). In this case both position and left are useless. The snippet shows all this:
$('body').on('click', '#mydiv1, #mydiv2', handleClick);
// ^ handler on body | |
// for elements |
// handler method
function handleClick(e) {
$('#'+this.id+'a').fadeToggle('slow');
}
#mydiv1, #mydiv2 {
cursor: pointer;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="mydiv1">Div One</div>
<div id="mydiv1a">Div One A</div>
<div id="mydiv2">Div Two</div>
<div id="mydiv2a">Div Two A</div>
You need to use # which is how you select element with a specific id in jQuery or css for that matter
$('#' + x.id + 'a').fadeToggle("slow");
But you can simplify your code to the below
$('div').filter(function(){ return /\d+$/.test(this.id) }).click(function(){
$(this).next().fadeToggle("slow");
});
Try this
$(this).next().fadeToggle("slow");
This code creates a click event for both divs. The event will be aware of the specific div clicked.
$(function(){
$("#mydiv1, #mydiv2").click(function(){
$(this).fadeToggle("slow");
});
});
I have a series of divs with class '.collection-list'. Within each one I need to add a class to every other child div '.streamItem'. These are loaded via an ajax call on a click event.
The problem I am having is that the class is being added to every other '.streamItem' from the top of the page on down. What I want is for the alternating to start and end within each parent '.collection-list' without effecting the others.
The goal is a two column layout for which which I need to add a different class for the items in the right column, but The first item should never have that class.
Here is what I have so far which is failing to do what I have in mind:
$(document).ajaxComplete(function () {
$('.collection-list').each(function(index) {
$('.streamItem:even').addClass('right');
})
});
There is no need for an each loop:
$('.collection-list').find('.streamItem:even').addClass('right');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vZdLc/
Basically the find is applied to each collection-list, but only matching the even streamItems within each.
You should modify the selector to target only child elements of current div in .each() loop:
$('.collection-list').each(function(index) {
$(this).find('.streamItem:even').addClass('right');
});
or
$('.collection-list').each(function(index) {
$('.streamItem:even',this).addClass('right');
})
If you want to use .each() to addClass check out my answer and $(this) was what you were missing in your code
Jquery
$('.streamItem:even').each(function() {
$(this).addClass('right');
});
CSS
.right{
color: green;
}
HTML
<div class="collection-list">
<div class="streamItem">item 1</div>
<div class="streamItem">item 2</div>
<div class="streamItem">item 3</div>
</div>
<div class="collection-list">
<div class="streamItem">item 1</div>
<div class="streamItem">item 2</div>
<div class="streamItem">item 3</div>
<div class="streamItem">item 4</div>
</div>
DEMO
For this Output
Use This Code
$( "div.streamItem:nth-child(odd)" ).addClass('right');
Demo
For this Output
Use This Code
$( "div.streamItem:nth-child(even)" ).addClass('right');
Demo
Was This Output Which you were getting and wanting to change to one among the above two
$('div.streamItem:even').each(function() {
$(this).addClass('right');
});
Demo