아코디언 아이콘은 전환되지 않습니다

Question

저는 jquery 아코디언 아이콘 토글을 만들려고했습니다. 현재 아코디언이 작동하고 있지만 화살표가있는 화살표 이미지는 바뀌지 않습니다. 나는 jquery에 대해 아주 새롭고 알아 내기 힘든 시간을 보냈다.

$(function(){ 

    // Hide all but first ul li 
    $('ul#accordion > li ul').click(function(e){ 
    e.stopPropagation(); 


    }) 
    .filter(':not(:first)') 
    .hide(); 

$('ul#accordion > li').click(function(){ 
    // Set up a variable to detect if the ul is visible 
    var selfClick = $(this).find('ul:first').is(':visible'); 
$(this).next().removeClass('arrow-down'); 
    $(this).next().addClass('arrow-up'); 

    // If it is open, do nothing 
    if (selfClick){ 
    return; 
    } 

    // Toggle the visible panel 
    $(this) 
    .parent() 
    .find('> li ul:visible') 
    .slideToggle() 


    // Toggle the hidden, clicked on panel 
    $(this) 
    .find('ul:first') 
    .stop(true, true) 
    .slideToggle() 


}); 
}); 


<ul id="accordion"> 

    <li> 

<h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3> 
    <ul> 
     <li> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
     </li> 

    </ul> 
    </li> 
    <li> 
<h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3> 
    <ul> 
     <li> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
     </li> 

    </ul> 
    </li> 
    <li> 
<h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3> 
    <ul> 
     <li> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     </li> 

    </ul> 
    </li> 
</ul> 

CSS

#accordion { 
    width:735px; 
    padding-left:0px; 
} 

h3{ 
    background:url(../img/accordion_bg.jpg) repeat-x; 
    height:38px; 
    padding:0px 0px 0px 10px; 
    line-height:38px; 
    margin:0px; 
} 

#accordion li { 
    cursor:pointer; 
    font-weight:bold; 
    color:#015287; 
    margin-bottom:2px; 
    list-style:none; 
    border-radius:4px; 
} 

.accordion_head{ 
    background:url(../img/arrow_down.png) right center no-repeat; 
} 

#accordion li.active { 
    background-color:#F00; 
} 

.arrow-down { 
    float:right; 
    background:url(../img/arrow_down.png) no-repeat right center; 
    margin-right:15px; 
    margin-top:10px; 
    width:18px; 
    height:18px; 
} 

.arrow-up { 
    float:right; 
    background:url(../img/arrow_up.png) no-repeat right center; 
    margin-right:15px; 
    margin-top:10px; 
    width:18px; 
    height:18px; 
} 

#accordion li ul { 
    padding:0; 
    margin:10px 0 0 0; 
} 

#accordion li ul li{ 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
    -moz-column-count: 2; /* Firefox */ 
    column-count: 2; 
} 

#accordion li li { 
    font-weight:normal; 
    border:0; 
} 

Answer 1

확인이 개 의견 // === 수정 및 // === 새로운 코드

$(function(){ 

    // Hide all but first ul li 
    $('ul#accordion > li ul').click(function(e){ 
    e.stopPropagation(); 


    }) 
    .filter(':not(:first)') 
    .hide(); 

$('ul#accordion > li').click(function(){ 
    // Set up a variable to detect if the ul is visible 
    var selfClick = $(this).find('ul:first').is(':visible'); 
//=== modifications 
//$(this).next().removeClass('arrow-down'); 
    //$(this).next().addClass('arrow-up'); 




    // If it is open, do nothing 
    if (selfClick){ 
    return; 
    } 

//=== new code 
$('#accordion').find('i').removeClass('arrow-down').addClass('arrow-up'); 
    $(this).find('i').removeClass('arrow-up'); 
    $(this).find('i').addClass('arrow-down'); 



    // Toggle the visible panel 
    $(this) 
    .parent() 
    .find('> li ul:visible') 
    .slideToggle() 


    // Toggle the hidden, clicked on panel 
    $(this) 
    .find('ul:first') 
    .stop(true, true) 
    .slideToggle() 


}); 
}); 

FIDDLE