I have designed a small panel using the following code, which will display the content to the user by clicking on it:
<div class="MyPanel">
<ul class="body_panel">
<li class="title_panel">
<h5>title</h5>
<span class="fas fa-circle-chevron-right icon-title-right_panel"></span> //Icon call from fontawesome
<span class="fas fa-circle-chevron-down icon-title-down_panel"></span> //Icon call from fontawesome
<ul class="box-contect_panel">
<li class="contect_panel">
<h1>contect</h1>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.MyPanel ul li {
cursor: pointer;
position: relative;
}
.MyPanel ul li .icon-title-right_panel,
.MyPanel ul li .icon-title-down_panel {
position: absolute;
top: 0;
right: 0;
font-size: 30px;
}
.MyPanel ul li .icon-title-down_panel { //Hide icon down
display: none;
}
Script:
$('.body_panel').find('li').click(function() {
if (find('ul')) { //****** This line of code is wrong ******
$(this).children('.icon-title-right_panel').remove();
$(this).children('.icon-title-down_panel').toggle();
} else {
$(this).children('.icon-title-right_panel').toggle();
$(this).children('.icon-title-down_panel').remove();
}
});
$('.MyPanel').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').slideToggle();
});
By clicking on the title of any icon on the right side, it will be removed. and it appears by clicking again.
As I specified in the script code; What alternative code should I write to delete the icon on the right by clicking on the title and the icon on the bottom appears instead?