How to toggle the contents of span when clicked?


Tags: javascript,jquery,html,css

Problem :

I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down 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 drop down 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;
}    


Solution :

One solution is to compare previous text with new:

    $('.shop').click(function() {
      $('.shopList').slideToggle("fast");
      $("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
    });
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 {
  display: none;
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


    CSS Howto..

    SceneBuilder (by gluon) doesn't show imported fonts

    How to make a key shape using css?

    how to place an image at the center of the browser irrespective of the resolution?

    How to selectively pass mouse events to underlying svg elements

    How to add a line break inside with CSS?

    How Would I Center Text In This DIV?

    How to have a two headings in same line with css?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How to see the print media CSS in Firebug?

    How to make shapes with CSS which have borders?

    How to beautify this nested list with css?

    Position: fixed Background DIV with images makes scrolling slow: How to make conditional CSS rules for browser-compatibility?

    Rails 4 - how to write a helper method

    how to draw a vertical line between two option boxes using css

    Speechbubble tooltip in CSS - how to move the arrow

    How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]

    How to override inline css through javascript?

    How to make a div grow with its children when inline-blocks don't fit anymore

    how to display navigationMenu div left side of the slider

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How to make outer columns same height with nested bootstrap grids

    How to make list of all classes in the page using jQuery?

    Flexbox in Chrome--How to limit size of nested elements? [duplicate]

    How to fix responsive drop down menu using css?

    How to implement fluid font size using pure CSS

    PostCSS: How to conditionally add a new rule based on declaration in current rule?

    How do you set a css class attribute with Javascript? [duplicate]

    How do change CSS Class from Code Behind?

    How can I tell a scrollbar to always start at the bottom with CSS?

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins