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..

    My jquery slideshow is not functioning properly

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

    CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

    How do I put these on the same line?

    How to prevent opening a link of the submenu when tapping the menu?

    How to clean style sheets mess? [duplicate]

    How to turn off :hover with CSS?

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    C# How to base64 encode background gradient

    How to horizontally stack elements using CSS?

    How to give the padding for option with css only

    how to set zoom level using css

    How to edit Skype contact me button CSS?

    How to design the data that you gathered from the table

    How to keep control-specific css with the control code (ASP.NET)

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    How to remove vertical scrollbar from iframe inside the page

    How can I change the colour of individual squares on this grid…?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    How to change style to a class from a rel attribute CSS

    How to change first word color through css [duplicate]

    CSS: How to center text with surrounding borders

    How to have different input text styles in same html form?

    css: How to add blank space under a sprint element

    How to make controlls for epub using HTML 5,JavaScript and CSS?

    How to set caption for youtube videos box in css?

    How to make the Div fixed at a particular scroll location?

    How to avoid an unknown height sticky footer to overlap content with CSS only?

    How to center and span table heading (row)

    How do three.js transforms and CSS3 3D-transforms correspond?