添加向上和向下箭头以使用纯 JS 引导手风琴

Question

My code:

<div class="panel" style="margin-left: -15px;">
                <div class="panel-heading">
                    <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">

                        <div class="groupicon">
                            <div class="groupicontext">P</div>
                        </div>
                        <div class="grouptext">
                            <div class="grouptitle">Physics</div>
                        </div>
                        <img onclick="changeArrow(this);" src="../assets/images/down.png" width="45px" style="margin-left: 240px; opacity: 1;" onmouseover="this.style.opacity='75%';" onmouseout="this.style.opacity='100%';">

                    </div>      
                </div></div>

function changeArrow(id){
    if(id.src = '../assets/images/down.png'){
        id.src = '../assets/images/up.png';
    } else {
        id.src = '../assets/images/down.png';
    }
}

Currently, the arrow doesn't change.

How can I make it so that the arrow changes to up.png?

or even better, have it have an animation and rotate 180 degrees?

Any help would be great - thank you!

Answer 1

do it with == rather than = inside if condition and use getAttribute("src") rahter than src because src give directly whole path but getAttribute gives you what inside it

 function changeArrow(id){ console.log(id.src) if(id.getAttribute("src") == '../assets/images/down.png'){ id.src = '../assets/images/up.png'; } else { id.src = '../assets/images/down.png'; } } function removevBgs(){}

 <div class="panel" style="margin-left: -15px;"> <div class="panel-heading"> <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;"> <div class="groupicon"> <div class="groupicontext">P</div> </div> <div class="grouptext"> <div class="grouptitle">Physics</div> </div> <img onclick="changeArrow(this);" src="../assets/images/down.png" width="45px" style="margin-left: 240px; opacity: 1;" onmouseover="this.style.opacity='75%';" onmouseout="this.style.opacity='100%';"> </div> </div> </div>