Estaba trabajando en un acordeón que cuando una de las pestañas se abre, las otras se cierran. Quería agregar flechas en el costado para que las flechas se muevan cuando se abre el acordeón. Entonces cuando está cerrado está en esta posición y cuando se abre está en esta posición . También quería agregar una transición de atenuación a la información que se muestra después de hacer clic en un acordeón. A continuación puede encontrar el archivo HTML y el archivo JS de lo que trabajé hasta ahora. Me abrí a sugerencias si tienes alguna otra idea para mejorar esto.

 <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);