How do I switch the contents of a range when clicked?

I have a navigation bar with a dropdown menu. I have a + in front of the dropdown inside the span. I would like the plus to switch to - when the menu is dropped, and back to + when the menu is up (hidden). How can i do this?

my html looks like

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li class="shop"><a href="#"><span>+</span>Shop</a>
            <ul class="shopList">
                <li><a href="#">New Arrivals</a></li>
                <li><a href="#">Dresses</a></li>
                <li><a href="#">Jumpsuits</a></li>
            </ul>
        </li>
        <li><a href="wholesale.php">Wholesale</a></li>
        <li><a href="retailers.php">Retailers</a></li>
        <li><a href="contact.php">Contact</a></li>
    </ul>
</nav>

      

        
        
        
      

    

I am currently using js to render my menu. Can I add to my current js to achieve this. My js looks like

$(document).ready(function() {
    $('.shop').click(function() {
            $('.shopList').slideToggle("fast");
    });
});

      

        
        
        
      

    

here is my css

nav{
   position:relative;
   display:block;
   width:70%;
   margin:0;
   padding:3px 15%;
   border-top:1px solid #d0d0d0;
   text-align:center;
   font:15px 'OpenSans';
   z-index: 999;
}
nav ul{
   position:relative;
   width:100%;
   margin:0;
   padding:0;
}
nav li{
   display:inline-block;
   margin:0 10px;
   padding:0;
}
nav li ul li{
   position:relative;
   display:block;
   width:150px;
   margin:0;
   padding:0;
}
.shopList{
   position:absolute;
   display:none;
   width:100px;
   margin:0 0 0 -50px;
   padding:0;
}
nav a{
   position:relative;
   display:block;
   width:auto;
   margin:0;
   padding:0;
   color:#707070;
   text-decoration:none;
}