Trying to make my arrow image jquery change differently on Hide / Show content

I have this very simple JQuery

$(document).ready(function() {
  $(".neverseen img").click(function() {
    $(".neverseen p").slideToggle("slow");
    return false;
  });
});

And this HTML

<div class="neverseen">
  <h1>Title to always show</h1>
  <a href="#" id="show">
    <img src="images/demo/arrow.png" width="40" height="40">
  </a>
  <p>Text to toggle hide/show</p>
</div>

So what I need is to add another image called arrow2.png that will replace the first arrow when hidden content activates or make the current arrow turn 180 degrees. I have tried different jquery methods but nothing seems to work so well.

Another thing I wish is to have a border-bottom that is visible at all times and moves with the hidden content so the border is below the title on hidden and below the content on visible, whatever I am doing here results in double borders.


You have different solutions to achieve that, here is one of them:

$(document).ready(function() {
  $(".neverseen img").click(function() {
   $(this).parent().toggleClass("active");
   $(".neverseen p").slideToggle("slow");
     return false;
    });
});
img {
  width: 50px;
}

#secondImage {
  display: none;
}

.active #firstImg {
  display:none;
}

.active #secondImage {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="neverseen">
<h1>Title to always show</h1>
<a href="#" id="show">
<img id="secondImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSWdFg2vU1YX0W8HGMurPjTOSsOf8rwadUWNwPV6I_7NsDJ3nnURSSzIcw" width="40" height="40">
 <img id="firstImg" src="https://image.freepik.com/free-icon/arrow-top-ios-7-interface-symbol_318-34757.jpg" alt="">
</a>
<p>
  Text to toggle hide/show <hr class="to-be-hidden">
  </p>
</div>

I would suggest you to use bootstrap collapse, it is really amazing!