I'm new to Jquery and I have been trying to show and hide the list of Categories when I click on the element `<li class="show">Categories</li>` as well as change the class name from show to close. I can get the categories and class name to change on the first click but not on the second click or any other click after the first click.

HTML

```
<nav>
    <ul id="nav">
        <li class="show">Categories</li>
    </ul>
</nav>

<nav id="categories">
    <ul>
        <li><a href="">Category 1</a></li>
        <li><a href="">Category 2</a></li>
        <li><a href="">Category 3</a></li>
        <li><a href="">Category 4</a></li>
    </ul>
</nav>

```

JQuery

```
$('.show').click(function(){
    $('#categories').show();
    $(this).addClass('close').removeClass('show');
});  

$('.close').click(function(){
    $('#categories').hide();
    $(this).addClass('show').removeClass('close');
});

```