Arrow pointing to the correct direction when click expan/collapse all

Question

I did the "expand/collapse all" function, everything is working well, except the arrow. It doesn't pointing to the correct direction. I'm not sure how to do that, so I leave it empty on my code. My issue is shown below.

(Red box represents the click action)

1. Click "View all", can see the expanders are opened. The arrows pointing down.

2. Click "A" to collapse the expander, and the arrow pointing up.

3. Click "Collapse all", the expanders are collpased. Now you can see my problem, "A" arrow is pointing up and the rest are pointing down.

Hoping that some of you could provide me with some advice. Thanks!

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle1").click(function() {
  $('.aq_expandct1').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle2").click(function() {
  $('.aq_expandct2').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".expandall").click(function() {
  $('.aq_expandct').slideDown().toggleClass('active');
  $('.aq_expandct1').slideDown().toggleClass('active');
  $('.aq_expandct2').slideDown().toggleClass('active');
});

$(".collapseall").click(function() {
  $('.aq_expandct').slideUp().removeClass('active');
  $('.aq_expandct1').slideUp().removeClass('active');
  $('.aq_expandct2').slideUp().removeClass('active');
});

ul { list-style-type: none; margin:0; padding: 0; } 


.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
	display: none;
	padding : 5px;
}
	
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
	background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
	background-position:right 0px;
	cursor:pointer;
	padding: 0 10px;
  margin: 10px 0;
}
	
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
	background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">A</div>
    <ul class="aq_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle1">B</div>
    <ul class="aq_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="aq_epdtitle2">C</div>
    <ul class="aq_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>

Answer 1

Just add $('.mobexpand').addClass('collapsed'); ($(".expandall").click) in show all function

and $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) and in collsapse all function as bellow

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle1").click(function() {
  $('.aq_expandct1').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle2").click(function() {
  $('.aq_expandct2').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".expandall").click(function() {
  $('.aq_expandct').slideDown().toggleClass('active');
  $('.aq_expandct1').slideDown().toggleClass('active');
  $('.aq_expandct2').slideDown().toggleClass('active');
  $('.mobexpand').removeClass('collapsed');
});

$(".collapseall").click(function() {
  $('.aq_expandct').slideUp().removeClass('active');
  $('.aq_expandct1').slideUp().removeClass('active');
  $('.aq_expandct2').slideUp().removeClass('active');
  $('.mobexpand').addClass('collapsed');
});

ul { list-style-type: none; margin:0; padding: 0; } 


.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
	display: none;
	padding : 5px;
}
	
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
	background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
	background-position:right 0px;
	cursor:pointer;
	padding: 0 10px;
  margin: 10px 0;
}
	
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
	background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">A</div>
    <ul class="aq_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle1">B</div>
    <ul class="aq_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="aq_epdtitle2">C</div>
    <ul class="aq_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>