Add arrows to my existing accordion

Question

I am building an accordion for our website FAQ page. I have an accordion implemented but I was asked to add arrows(pointing right) before each question that point down when that section is clicked on and then goes back to pointing right when another section is clicked on.

Here is my existing code: http://jsfiddle.net/gvolkerding/ancu6fgu/2/

HTML:

    <div class="accordion-section"><a class="accordion-section-title" href="#how1">How can I insert a question in this spot when we come up with content?</a>
        <div id="how1" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-2">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-2" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-3">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-3" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-4">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-4" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-5">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-5" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-6">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-6" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section"><a class="accordion-section-title" href="#accordion-7">How can I insert a question in this spot when we come up with content?</a>
        <div id="accordion-7" class="accordion-section-content">
        Lorem ipsum dolor sit amet, 
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
   </div><!--end .accordion-->

CSS: / ----- Accordion ----- / .accordion, .accordion * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.accordion {
overflow:hidden;
margin-bottom: 40px;

}

/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:17px;
display:inline-block;
border-bottom:1px solid #e7e7e7;
background:none;
transition:all linear 0.15s;
/* Type */
font-size:1.000em;

color:#00438c;
font-family:'HelveticaNeueW01-45Ligh';

}
.accordion-section-title a:hover {
color: #fff !important;
}
.accordion-section-title > a:focus {
color: #fff !important;
}
.accordion-section-title.active, .accordion-section-title:hover {
background:#e7e7e7;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
color: #3b3b3b;
font-size: 14px;
line-height: 20px;
}

jQuery:

 $(document).ready(function() {
 function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

    $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
    });


});

I was wondering if someone could help me implement these arrows, as I have no idea how to modify the code to accommodate this feature. I really appreciate all of the help and I'm sorry if this is a question you've already had to answer in the past.

Answer 1

I just add a text like Right (you have to use arrow icon) to every question. Then when user clicked on any question, update all question to Right at function close_accordion_section and make current on is down at click function.

Script

 $(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active')
        .find('strong').text('Right');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        $(this).find('strong').text('Down');
        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
  });
});

Fiddle : http://jsfiddle.net/zx18qx02/

Answer 2

JQuery Accordion has two states " active " and " default ". Depending on the status, you can display different image. Just update the CSS as follows:

 .ui-state-active .ui-icon {
  background-image: url("images/<path to your arrow image>");
}

.ui-state-default .ui-icon {
  background-image: url("images/<path to different arrow image>");
}