Toggle up and down arrows as images

Question

I have two images of arrows, up and down. My problem is when I use slideToggle(), it toggles up and down, but the image stays the same rather then changing. For instance, if I toggle up, the image should automatically change to the downward arrow and vice versa. Also, these arrows should be moved to the top of the page once the toggle happens. The current code displays two arrows, I would like that to be one arrow that changes based on the toggle.

What I have so far..

HTML:

 <div id="toggleParam">
        <input type="image" class="upArrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
        <input type="image" class="downArrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
 </div>

CSS:

.upArrow{
            display: block;
            margin-left: 690px;
            margin-top: 0px;
            border-width: 5px;
            padding-bottom: 0px;
            cursor: pointer;
            height: 7pt;
      }
 .downArrow{
            display: block;
            margin-left: 760px;
            margin-right: 70px;
            margin-top: -10px;
            border-width: 5px;
            padding-bottom: 0px;
            cursor: pointer;
            height: 7.5pt;
      }

JavaScript/JQuery:

$(document).ready(function () {
            $('#toggleParam').on("click", function () {
                $('.dropdown').slideToggle();
            }); 

What I need is shown in these two pictures..

I realize missing a lot of code on the JS part.. I am working on it while asking this question. Thanks for the help!

Answer 1

You need to simply include the arrows' elements in the toggle function accordingly:

$('#toggleParam').on("click", function () {
    $('.downArrow, .upArrow').toggle();
    $('.dropdown').slideToggle();
});

Also in the beginning you need to hide one of the arrows (not sure which one in your case):

.downArrow{
        display: none;
...

.upArrow{
        display: block;

Answer 2

Try this (note - there's n-ways to do this; this is just how i'd do it).

    <!--index.html-->

    <div id="toggleParam" class="toggle-param--up">
      <input type="image" class="up-arrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
      <input type="image" class="down-arrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
    </div>


    /* app.css */
    .toggle-param--up .down-arrow { display; none;}
    .toggle-param--down .up-arrow { display; none;}


    //app.js

     $('#toggleParam').on("click", function (e) {

       // the rest of your logic goes here....


       var isUp = $(e.target).hasClass("toggle-param--up"),
           directionClass = { true: "toggle-param--up", false: "toggle-param--down"};
       $(e).target.removeClass(directionClass[isUp]).addClass(directionClass[!isUp];
     });