Question: The `<span> + </span>` is added outside of the `<a></a>` tag, how can I make the `<span>` show inside the tag?

In this way:

```
<a>about us <span>+</span></a>

```

**My code:**

```js
jQuery(document).ready(function ($) {
  $('.accord ul li:has(ul)').addClass('expand').find('ul').hide();
  $('.accord ul li.expand>a').after('<span> + </span>');

  $('.accord ul').on('click', 'li.collapse span ', function (e) {
   $(this).text(' + ').parent().addClass('expand').removeClass('collapse').find('>ul').slideUp();
   e.stopImmediatePropagation();
  });

  $('.accord ul').on('click', 'li.expand span', function (e) {
   $(this).text(' - ').parent().addClass('collapse').removeClass('expand').find('>ul').slideDown();
   e.stopImmediatePropagation();
  });

  $('.accord ul').on('click', 'li.collapse li:not(.collapse)', function (e) {
   e.stopImmediatePropagation();
  });  
 });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- HTML -->
     <div id="Accord" class="accord">
       <ul>
         <li><a href='#'>about us</a>
           <ul class='sub'>
             <li><a href='#'>Text</a><ul><li><a>Text</a></li></ul></li>
           </ul>
         </li>
       </ul>
     </div>
```

Answer: 
Here you go with a solution

```js
$(document).ready(function ($) {
  $('.accord ul li:has(ul)').addClass('expand').find('ul').hide();
  $('.accord ul li.expand>a').append('<span> + </span>');

  $('.accord ul').on('click', 'li.collapse a span ', function (e) {
    $(this).text(' + ').closest('li').addClass('expand').removeClass('collapse').find('>ul').slideUp();
    e.stopImmediatePropagation();
  });

  $('.accord ul').on('click', 'li.expand a span', function (e) {
    $(this).text(' - ').closest('li').addClass('collapse').removeClass('expand').find('>ul').slideDown();
    e.stopImmediatePropagation();
  });

  $('.accord ul').on('click', 'li.collapse li:not(.collapse)', function (e) {
    e.stopImmediatePropagation();
  });  
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Accord" class="accord">
 <ul>
   <li><a href='#'>about us</a>
     <ul class='sub'>
       <li><a href='#'>Text</a><ul><li><a>Text</a></li></ul></li>
     </ul>
   </li>
 </ul>
</div>
```

You need to use `append` instead of `after` and for finding the li use `closest('li')` instead of `parent`.

Rather than traversing using `parent` use `closest`.

Hope this will help you.
Try using .append() function instead of .after().

[Append documentation](https://www.w3schools.com/jquery/html_append.asp)