javascript - クリック可能なテキストで肯定的および否定的な言い方をする

Question

以下のコードを使用して、ユーザーがタイトルをクリックしたことに基づいて広告表示データを表示できるようにしましたが、その横にポジティブな画像を追加しようとしていますが、これは簡単に実行できますが、ユーザーが見出しをクリックしてデータが表示されたのはnegative.pngを表示したいのですが、クリックしてデータを再度非表示にすると、positive.pngを表示したいと思います

HTML コード

 <div >
        <div class="layer1">
            <p class="heading">To view report fields click here</p>
                <div class="content" >
                     <table>
                        <tr>
                            <th>Name</th>
                        </tr>
                        <tr>
                            <td><h4>Gender</h4></td>
                        </tr>
                        <tr>
                            <td><h4>Percentage</h4></td>
                        </tr>
                    </table>   
                </div> 
         </div>
     </div>

CSS コード

.layer1 {
margin: 0;
padding: 0;
width: auto;
}

.heading {
margin: 1px;
color:Black;
font-family:Arial;
font-weight:bold;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#C0C0C0;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}

JavaScript コード

jQuery(document).ready(function () {
     jQuery(".content").hide();
     //toggle the componenet with class msg_body
     jQuery(".heading").click(function () {
         jQuery(this).next(".content").slideToggle(400);
     });
 })