Accordion - add arrow to each nav item?

Question

I have implemented this accordions script under What We Do

I need to add up and down arrows to each nav item as seen in this pic. Where and how do I code in the two states(inactive arrow & active arrow) into the jQuery. Im thinking I need to code this into the jQuery?

Answer 1

You can do this with some simple CSS classes, since the a's have different classes when they are opened:

toggler toggler-closed and toggler toggler-opened

.toggler.toggler-opened {
    /* a background image on the right side with arrow down? */
}

.toggler.toggler-closed {
    /* a background image on the right side with arrow to the right? */
}

Answer 2

This seems relatively simple, though I'm perhaps using a little too much jQuery:

jQuery:

$(document).ready(
    function(){
        $('.toggler').each(function(){
            $('<span></span>').appendTo($(this));
        });
        $('.toggler-closed > span').text('▶');
        $('.toggler-opened > span').text('▼');
    });

css:

.toggler span {
  float: right;
  background-color: #eee;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  line-height: 1em;
}