I was working on an accordion that when one of the tabs opens the other ones close. I wanted to add arrows on the side so that the arrows move when the accordion opens. So when it is closed is in this position and when it is opened is in this position . I also wanted to add a fade transition to the information that is shown after you click one accordion. Below you can find the HTML file and JS file of what i worked so far. I opened to suggestions if you have any other idea to make this better.

<dl class="accordion">
    
    <dt class="acc-d"><a href="">DESCRIPTION</a></dt>
    <dd class="acc">some text here</dd>
    
    <dt class="acc-d"><a href="">SHIPPING & RETURN</a></dt>
    <dd class="acc"> Some text here</dd>
    
    <dt class="acc-d"><a href="">REVIEWS</a></dt>
    <dd class="acc">Some text here</dd>
    
    </dl>

(function($) {
    
  var allPanels = $('.accordion > dd').hide();
    
  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
    
  });

  
})(jQuery);