Требуется нарисовать с помощью css треугольную стрелку для списка ▼ и поворачивать её при открытии/закрытии списка.

<div class="i_phone_main j_phone_main">
   <span class="i_phone_main_str"></span>
</div>

.i_phone_main_str{
   transform: rotate(180deg);
}

.i_phone_main_str:after {
   content: " ";
   position: absolute;
   width: 0;
   height: 0;
   top: -5px;
   left: -18px;
   border: solid transparent;
   border-width: 4px;
   border-bottom-color: #fff;
   pointer-events: none;
}

.i_phone_main_str.hd:after {
    top: 0;
    border-bottom-color: #000;
    transform: rotate(180deg);
}

$('body').on('click', '.j_phone_main', function ()
{
var $item = $('.j_phone_item');
if (!$item.is(':visible')) {
   $('.i_phone_main_str').addClass('hd');
   $item.slideToggle();
}
else {
   $('.i_phone_main_str').removeClass('hd');
}
return false;
});