PDA

View Full Version : jQuery div toggle




Hexiii
Nov 3, 2011, 03:47 PM
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
Nov 3, 2011, 04:17 PM
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
Nov 3, 2011, 04:23 PM
Thanks, I'll try that.

Hexiii
Nov 4, 2011, 10:05 AM
Well, it doesn't work

jared_kipe
Nov 4, 2011, 10:38 AM
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
Nov 4, 2011, 10:42 AM
(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
Nov 4, 2011, 12:03 PM
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
Nov 4, 2011, 12:13 PM
<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
Nov 4, 2011, 12:27 PM
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
Nov 4, 2011, 12:29 PM
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
Nov 4, 2011, 12:40 PM
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
Nov 4, 2011, 01:14 PM
Why does this (http://www.sohtanaka.com/web-design/examples/toggle/#) work and mine not?

jared_kipe
Nov 4, 2011, 01:34 PM
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
Nov 4, 2011, 01:38 PM
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
Nov 4, 2011, 01:43 PM
Well obviously the effect depends on the CSS for the various elements, mainly the container element .open

Hexiii
Nov 4, 2011, 02:06 PM
So there isn't any "or" selector in jQuery? something like ("open1"/"open2")

jared_kipe
Nov 4, 2011, 02:19 PM
What would that acomplish? Would it select both of them?

Hexiii
Nov 4, 2011, 03:12 PM
i'd create a separate class for each div and then just put all of them to the jquery

Hexiii
Nov 5, 2011, 08:15 AM
Awwww, I found that mistake. I put there <nobr>xxx<nobr> instead of <nobr> xxx </nobr>.

I feel stupid. -.-'

jared_kipe
Nov 5, 2011, 09:29 AM
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 :D