www.webdeveloper.com
Results 1 to 2 of 2

Thread: Toggling a div - have to click twice

Hybrid View

  1. #1
    Join Date
    Feb 2007
    Posts
    108

    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:

    HTML 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. #2
    Join Date
    Feb 2007
    Posts
    108
    Got it!

    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");
            }
        });
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles