Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Posts
    157
    Thanks
    6
    Thanked 4 Times in 4 Posts

    Toggling a div - have to click twice

    Hi guys! I'm having an issue with a bit of javascript. I have multiple divs on a page, with a portion of their content hidden. In theory you should be able to click one of two links to toggle the div (the div comes with two toggle links). What I have below works, but you have to click one of the links twice before it will trigger and I"m not sure why:

    Code:
    $(function(){
    	$(".toggle-content").slideUp();
        $(".toggle" ).toggle(
            function() {
                $(this).parents(".article").children('.toggle-content').slideUp('slow');
    			$(this).parents(".article").children('h6').removeClass("arrow-down");
    			$(this).fadeIn("fast");
            },
            function() {
                $(this).parents(".article").children('.toggle-content').slideDown('slow');
    			$(this).parents(".article").children('h6').addClass("arrow-down");
    			 $(this).fadeOut("fast");
            }
        );
    	
        $("h6" ).toggle(
            function() {
                $(this).parents(".article").children('.toggle-content').slideUp('slow');
    			$(this).removeClass("arrow-down");
    			$(this).parent(".article").find(".toggle").fadeIn("fast");
            },
            function() {
                $(this).parents(".article").children('.toggle-content').slideDown('slow');
    			$(this).addClass("arrow-down");
    			$(this).parent(".article").find(".toggle").fadeOut("fast");
            }
        );
    	
    });
    When I change the line from toggle to click, it works without issue. Like $("h6").click(funciton() { But unfortunately when that happens it won't toggle closed again.

    I'm sure it's something really basic and silly - I'm just not that great with javascript. Any input would be greatly appreciated! Thank you.

  • #2
    Regular Coder
    Join Date
    Mar 2007
    Posts
    157
    Thanks
    6
    Thanked 4 Times in 4 Posts
    Got it figured out

    Code:
    $(function(){
    	$(".toggle-content").slideUp();
     
        $("h6" ).click(
            function() {
    		
    		if ($(this).hasClass("arrow-down")) {
    		
                $(this).parents(".article").children('.toggle-content').slideUp('slow');
    			$(this).removeClass("arrow-down");
    			$(this).parent(".article").find(".toggle").fadeIn("fast");
            }
    		else
    		{
    	   
                $(this).parents(".article").children('.toggle-content').slideDown('slow');
    			$(this).addClass("arrow-down");
    			$(this).parent(".article").find(".toggle").fadeOut("fast");
            }
        });
    	
    	
    	   $(".toggle" ).click(
            function() {
    		
    		if ($(this).parents(".article").children('h6').hasClass("arrow-down")) {
    		
                $(this).parents(".article").children('.toggle-content').slideUp('slow');
    			$(this).parents(".article").children('h6').removeClass("arrow-down");
    			$(this).fadeIn("fast");
    			
    		}
    		else
    		{
    		
                $(this).parents(".article").children('.toggle-content').slideDown('slow');
    			$(this).parents(".article").children('h6').addClass("arrow-down");
    			 $(this).fadeOut("fast");
            }
        });
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •