Delete object with javascript-CodePudding

I have designed a small panel using the following code, which will display the content to the user by clicking on it:

$('.body_panel').find('li').click(function() {
        if ($(this).has("ul")) {
            $(this).children('.icon-title-right_panel').hide();
            $(this).children('.icon-title-down_panel').show();
        } else {
            $(this).children('.icon-title-right_panel').show();
            $(this).children('.icon-title-down_panel').hide();
        }
    });


$('.MyPanel').find('li').click(function(evt) {
  evt.stopPropagation();
  $(this).children('ul').slideToggle();
});

.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 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div >

  <ul >
    <li >

      <h5>title</h5>

      <span ></span> 
      <span ></span> 

      <ul >
        <li >

          <h1>contect</h1>

        </li>
      </ul>
    </li>
  </ul>

</div>

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?

CodePudding user response：

Please try to do like this. the key is to catch the toggle status when you click li.

    $('.body_panel').find('li').click(function() {
      if($(this).parent().find("ul").eq(0).is(':visible')) {
        
        $(this).children('.icon-title-right_panel').show();
                    $(this).children('.icon-title-down_panel').hide();
        
      } else {
        $(this).children('.icon-title-right_panel').hide();
                    $(this).children('.icon-title-down_panel').show();
      }
               
            });
    
            $('.MyPanel').find('li').click(function(evt) {
                evt.stopPropagation();
                $(this).children('ul').slideToggle();
            });



    .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;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

<div >

  <ul >
    <li >

      <h5>title</h5>

      <span ></span> 
      <span ></span> 

      <ul >
        <li >

          <h1>contect</h1>

        </li>
      </ul>
    </li>
  </ul>

</div>