Trying to get same jquery arrow effect on different menu in same page

Hello guys,
I wonder if someone can help me fixing an accordion menu. Basically I have one accordion menu on the main page and when click on that menu the arrows change upside down and the sections open. I also have a top navigation menu and when click on any item open the content accordion section and it's scroll to it but it doesn't change the arrow upside down.

This is the code for the main accordion:
$('.accordion').click(function(){var nextbody = $(this).next('.accordion-body');
changearrow(this);
$(this).next('.accordion-body').slideToggle();


});


function changearrow(divv){if($(divv).next('.accordion-body').css('display')==='none'){
$('.accarrow',divv).html($('.accarrow',divv).html().replace('accarrow','accarrowup'));
$('.accarrow',divv).addClass('accup');

}else{
$('.accarrow',divv).html($('.accarrow',divv).html().replace('accarrowup','accarrow'));
$('.accarrow',divv).removeClass('accup');

}}

This is the code from the top menu:
$('.button1').click(function(e){
e.preventDefault();
$('.active').removeClass('active');
$(this).addClass('active');
$('#contactus').slideUp();
$('#casestudies').slideUp();
$('#trackrecords').slideUp();
$('#newsbody').slideUp();
dataslide =1;
$('#assman').slideDown();
$('#services').slideDown(function(){goToByScroll(dataslide);});

});

Any idea how can I achieve this?

Thanks a lot!

 

Can you place all of this into a js fiddle?