I have a list of dropdowns to which I have put an image of an arrow, which should change from when it is closed to when the dropdown is displayed. When I modify the image from closed to open it does fine, but when the dropdown closes it doesn't go back to the previous image and I don't know why.
My code:
$('#acordeon_didesweb .contenido_acordeon').not('.menues.desplegado + .contenido_acordeon').hide();
$('#acordeon_didesweb .menues').click(function() {
$(this).find('.img-desplegado-open').attr('src', 'https://placehold.it/20x20/ff0000/');
if ($(this).hasClass('desplegado')) {
$(this).removeClass('desplegado');
$(this).next().slideUp();
} else {
$('#acordeon_didesweb .menues').removeClass('desplegado');
$(this).addClass('desplegado');
$('#acordeon_didesweb .contenido_acordeon').slideUp();
$(this).next().slideDown();
}
});
.menues {
font-family: iberia_text_bold;
background: #fff;
font-size: 18px;
color: #0090D0;
letter-spacing: -0.41px;
line-height: 25px;
border-bottom: 1px solid #333333;
cursor: pointer;
margin-right: 10px;
padding: 20px;
}
.tit-contenido {
font-family: iberia_text_regular;
font-size: 20px;
color: #4A4A4A;
letter-spacing: 0;
}
.contenido_acordeon {
background: #fff;
border-bottom: 1px solid #333333;
line-height: 1.6em;
padding: 20px;
}
.menues.desplegado,
.menues:hover {
background: #fff;
color: #4A4A4A;
}
.img-desplegado-open {
margin-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul id="acordeon_didesweb">
<div class="menues"><img src="https://placehold.it/20x20" class="img-desplegado-open"> 2015</div>
<li class="contenido_acordeon">
<p class="tit-contenido">Airline of the Year 2015 / 2016</p>
<p>Bronze in Recognition of Exceptional Performance in all Aspects of Regional Airline Operations ERA (European Regions Airline Association), Berlín</p>
</li>
<div class="menues"><img src="https://placehold.it/20x20" class="img-desplegado-open"> 2014</div>
<li class="contenido_acordeon">
<p class="tit-contenido">Airline of the Year 2015 / 2016</p>
<p>Bronze in Recognition of Exceptional Performance in all Aspects of Regional Airline Operations ERA (European Regions Airline Association), Berlín</p>
</li>
<div class="menues"><img src="https://placehold.it/20x20" class="img-desplegado-open"> 2013</div>
<li class="contenido_acordeon">
<p class="tit-contenido">Airline of the Year 2015 / 2016</p>
<p>Bronze in Recognition of Exceptional Performance in all Aspects of Regional Airline Operations ERA (European Regions https://es.stackoverflow.com/posts/223910/edit#Airline Association), Berlín</p>
</li>
</ul>
</div>
</div>
To change the image I have put this line of code in the JQuery
$(this).find('.img-desplegado-open').attr('src', './img/iconos/ic-li-open.svg');
but to modify it again when said dropdown is closed, I have tried to insert this line of code in the else
JQuery function modifying the image and it does not work for me.
How could I go about modifying the image when the dropdown is opened and closed?
You almost have it done: the problem when adding the jQuery code that you indicate in the
else
is that you would be undoing what you have done before outside theif..else
, so the image may look strange (the open icon will be seen when opening and the close icon will be will show when closing).The only thing left for you to do is move the image changes directly inside the
if..else
instead of having them outside: insideif
the image for when the dropdown is closed, and insideelse
the image for when the dropdown is open.With that simple change it works fine: