jQuery Accordion arrow icons with seperate close button

Question

I've got an accordion with arrow icons indicating when a section is open and closed. Once the accordion is opened the arrow points down showing the content below it.

However I've created a close button that gets appended into each section. This sits at the bottom of every section in the accordion.

I want it so that once the close button is pressed the arrow changes it's state back to closed.

$(function() {
$('#accordion h3').each(function(){ 
    var $set = $(this).nextUntil("h3");
    $set.wrapAll('<div />');
});

$('#accordion').accordion({ collapsible:true, active:true, heightStyle:"content", disabled:true, animated: false});
$('.ui-accordion-header').bind('click',function(){
    theOffset = $(this).offset();
    $(window).scrollTop(theOffset.top - 50);
});

$('#accordion h3.ui-accordion-header').click(function(){
    var _this = $(this);
    $('.ui-accordion-header-icon', _this).toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
    _this.next().slideToggle();
    return false;
});

    $('.ui-accordion-content').append('<a href="#" class="close">Close</a><div class="clearfix"></div>');

    $('.close').click(function(){
        $(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
        $(this).parent().slideUp('slow', function(){
            $(window).scrollTop(theOffset.top - 50);
            var hidecollapsebutton = true;
            $('.ui-accordion-content').each(function(){
                if($(this).css('display') == 'block')
                {
                    hidecollapsebutton = false;
                }
            });

            if(hidecollapsebutton)
            {
                $('.accordion-expand-all').show();
                $('.accordion-collapse-all').hide();
            }

        });

        return false;
    })

});

Any help would be much appreciated. I can provide more information if it's needed. Thanks.

http://jsfiddle.net/EZT6A/

Answer 1

$('.close').click(function(){
    $(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');

As you could have found out yourself with a little simple debugging, $(this).closest('.ui-accordion-content') does not match any element here. (That’s because your close button is within div.ui-accordion-content, and the h3.ui-accordion-header is the previous sibling of that div element.)

Simple to fix: Go up to parent div (.ui-accordion-content), get previous h3 (.ui-accordion-header), and then the span (.ui-accordion-header-icon) element within it:

$(this).parents('.ui-accordion-content')
  .prev('.ui-accordion-header')
  .find('.ui-accordion-header-icon')
  .removeClass('ui-icon-triangle-1-s')
  .addClass('ui-icon-triangle-1-e');

http://jsfiddle.net/EZT6A/2/

Answer 2

I'd try changing click to on:

$(document).on("click", ".close", function(){
   //change arrow state
});

It's because not every .close element exist as you binding click event.