Jquery to flip arrow icon based on collapse position

See more:

ASP.NET

jQuery

Just inherited code from a friend and here it is

<ItemTemplate>
        
                    <div style="margin: 30px 0 10px 30px;">
                        <a runat="server" id="Anchor" />
						<div class="question">
                            <div style="width:80%;height:auto; float:left;" data-toggle="collapse">
                                <p style="font-size:large;"><asp:Literal runat="server" ID="Question" /></p>
                            </div>
                            <div style="width:20%; height:auto; float:right;">
                                <span class="fa fa-angle-down"></span>

                            </div>
                        </div>
						<div class="answer" style="display: inline-block;"><asp:Literal runat="server" ID="Answer" /></div>
                    </div>

<script type="text/javascript">

                $(document).ready(function ()
                {
                    $('div.answer').hide();
                    $('div.question').click(function ()
                    {
                        var $question = $(this);
                        if ($question.hasClass('selected-question')) return;
                        $('div.selected-question').next().slideUp(function ()
                        {
                            $(this).prev().removeClass('selected-question');
                        });
                        var $answer = $question.addClass('selected-question').next();
                        $answer.slideDown();
                    });
                });
            
            </script>

What I have tried:

I've made the div to expand but i'm not able to collapse back