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.