jQuery div toggle

[Hexiii]

So, I have about 7 divs and every div is with different class. I want them to toggle SEPERATELY when I hover across it.

This is the function:

$(".open").hide();

	$("div.click").mouseenter(function(){
		$(".open").toggleClass("active").animate({width:'toggle'},1000);
	});

But if I want to have 7 div classes which every class toggle seperately, do I have to copy it 7 times and just change the class in every script? Because if I put a comma between each class it will toggle them at one time. So, any ideas?

[jsm4182]

Give all the divs the same class.

To have the function only applied to the one thats hovered over change $(".open") to $(".open", this).

Adding this changes the scope to only the element that triggered the function.

[Hexiii]

Thanks, I'll try that.

[Hexiii]

Well, it doesn't work

[jared_kipe]

I think he meant jQuery(this)

EDIT: Actually I'm not sure what you are intending to do. Are you basically trying to remove the class 'active' from all but the one hovered? I assume all of them start with out any having the class 'active', so on the hover of one just jQuery('.open').removeClass('active'); jQuery(this).addClass('active').animatewhatever...

What isn't working about it?

[Hexiii]

(Well I removed the class active, I don't know why did i put it there.)

I have 7 divs with the same class.
I want them to toggle on mouseenter.
If I hover across one, it will toggle all of them (with the same class)
So what do I have to add to toggle seperately?

$(".open").hide();

	$("div.click").mouseenter(function(){
		$(".open").animate({width:'toggle'},1000);
	});

[jared_kipe]

So the problem is how do you map some div.click's to the .open's. I don't have enough information to solve this problem.

You need to post code, because I can't tell if there is a parent-child relationship or if they are just completely separate.

<div class="open"><!-- 1 --><div class="click"><!-- 1 --></div></div>
<div class="open"><!-- 2 --><div class="click"><!-- 2 --></div></div>
<div class="open"><!-- 3 --><div class="click"><!-- 3 --></div></div>

<div class="click"><!-- 1 --></div>
<div class="click"><!-- 2 --></div>
<div class="click"><!-- 3 --></div>

<div class="open"><!-- 1 --></div>
<div class="open"><!-- 2 --></div>
<div class="open"><!-- 3 --></div>

Given the .hide(), I suspect the later. So you will need a way to map them between each other. I usually do this with either hidden text, or an empty link with href="n" so that you can find the n'th .open or something.

[Hexiii]

<div id="center">
 
	<div class="click"><a href="#"></a></div>
	<div class="open"><br>
			<h3>XXXX</h3>
			<p><nobr>XXXXX XXXX<nobr></p>
	</div>


	<div class="click left"><a href="#"></a></div>
	
	<div class="open left"><br>
			<h3>XXXX</h3>
			<p><nobr>XXXXX XXXX<nobr></p>
	</div>

</div>

[jared_kipe]

Easiest modification.

<div id="center">
 
	<div class="click"><a href="open1"></a></div>
	<div class="open open1"><br>
			<h3>XXXX</h3>
			<p><pre>XXXXX XXXX</pre></p>
	</div>


	<div class="click left"><a href="open2"></a></div>
	
	<div class="open open2 left"><br>
			<h3>XXXX</h3>
			<p><pre>XXXXX XXXX</pre></p>
	</div>

</div>

jQuery("div.click").mouseenter(function(){
	var classToOpen = jQuery(this).children('a').attr('href');
	jQuery(classToOpen).animate({width:'toggle'},1000);
});

Note that this won't 'un-toggle' the previously toggled ones...

[Hexiii]

Originally Posted by jared_kipe

Easiest modification.

Note that this won't 'un-toggle' the previously toggled ones...

Well, the mine won't either, but thanks, I will try that.

/e It doesn't work either.

[jared_kipe]

Originally Posted by Hexiii

Well, the mine won't either, but thanks, I will try that.

/e It doesn't work either.

Umm it should. Did you note the changes to the <a href="#" -> <a href="openN", and the addition of the class openN to the div's that you are opening?

EDIT: All this was on the proposition that your previous code WAS working except that it was 'toggling' all of the elements instead of 'toggling' one of them.

EDIT2: NVM napkin programming, I thought of the problem.

the JS should be like this, I didn't make a complete selector out of the href's.

jQuery("div.click").mouseenter(function(){
	var classToOpen = jQuery(this).children('a').attr('href');
	jQuery('.' + classToOpen).animate({width:'toggle'},1000);
});

You could of course roll that into the a's themselves.

[Hexiii]

Why does this work and mine not?

[jared_kipe]

because he uses jQuery(this).next() to find the element that is hidden right after the element that he is using to toggle them. This would work for your html. But not if you reordered it.

[Hexiii]

Originally Posted by jared_kipe

because he uses jQuery(this).next() to find the element that is hidden right after the element that he is using to toggle them. This would work for your html. But not if you reordered it.

Yeah, I tried that too, but it didn't work, maybe because one is on the left and one on the right.

[jared_kipe]

Well obviously the effect depends on the CSS for the various elements, mainly the container element .open

[Hexiii]

So there isn't any "or" selector in jQuery? something like ("open1"/"open2")

[jared_kipe]

What would that acomplish? Would it select both of them?

[Hexiii]

i'd create a separate class for each div and then just put all of them to the jquery

[Hexiii]

Awwww, I found that mistake. I put there <nobr>xxx<nobr> instead of <nobr> xxx </nobr>.

I feel stupid. -.-'

[jared_kipe]

Originally Posted by Hexiii

Awwww, I found that mistake. I put there <nobr>xxx<nobr> instead of <nobr> xxx </nobr>.

I feel stupid. -.-'

Yeah, and I replaced that deprecated tag with <pre></pre> so no excuses