jQuery div toggle

Discussion in 'Web Design and Development' started by Hexiii, Nov 3, 2011.

  1. macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #1
    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:
    Code:
    $(".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?
     
  2. macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Newburgh, NY
    #2
    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.
     
  3. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #3
    Thanks, I'll try that.
     
  4. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #4
    Well, it doesn't work
     
  5. jared_kipe, Nov 4, 2011
    Last edited: Nov 4, 2011

    macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #5
    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?
     
  6. Hexiii, Nov 4, 2011
    Last edited: Nov 4, 2011

    thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #6
    (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?

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

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #7
    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.
    Code:
    <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>
    
    Code:
    <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.
     
  8. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #8
    Code:
    <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>
     
  9. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #9
    Easiest modification.
    Code:
    <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>
    
    Code:
    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...
     
  10. Hexiii, Nov 4, 2011
    Last edited: Nov 4, 2011

    thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #10
    Well, the mine won't either, but thanks, I will try that.

    /e It doesn't work either.
     
  11. jared_kipe, Nov 4, 2011
    Last edited: Nov 4, 2011

    macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #11
    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.
    Code:
    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.
     
  12. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #12
    Why does this work and mine not?
     
  13. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #13
    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.
     
  14. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #14
    Yeah, I tried that too, but it didn't work, maybe because one is on the left and one on the right.
     
  15. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #15
    Well obviously the effect depends on the CSS for the various elements, mainly the container element .open
     
  16. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #16
    So there isn't any "or" selector in jQuery? something like ("open1"/"open2")
     
  17. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #17
    What would that acomplish? Would it select both of them?
     
  18. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #18
    i'd create a separate class for each div and then just put all of them to the jquery
     
  19. thread starter macrumors 6502a

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #19
    Awwww, I found that mistake. I put there <nobr>xxx<nobr> instead of <nobr> xxx </nobr>.

    I feel stupid. -.-'
     
  20. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #20
    Yeah, and I replaced that deprecated tag with <pre></pre> so no excuses :D
     

Share This Page