Accordion icons wont toggle

Question

i have been trying to make my jquery accordion icons toggle. Currently i got the accordion working, but the arrow-down, arrow-up images are not changing. I'm quite new to jquery, have been having hard time to figure out, how to do it.

$(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

Check two comments //=== modifications and //=== new code

$(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