title: Plus Minus Toggle on Clicking a Link
body: <p>I have a link with a plus symbol (More Details[+]) ... when the user clicks the link, I want the link to change to a minus (More Details[-]), and show the content below it. I can show/hide the content, but the +/- toggle doesn't work. Note: I'm new to javascript, so please be patient with my lack of knowledge...</p>
  
  <p>Note: There are a few posts about +/- toggles. I need help with the code that I wrote below.</p>
  
  <p>Below is the javascript...</p>
  
  <pre><code>// Plus/Minus Toggle
  function toggle_plus(id) {
      var f = document.getElementById(id);
      if (f.classList.contains("showplus")) {
              f.removeClass("showplus");
              f.addClass("showminus");
          } else {
              f.removeClass("showminus");
              f.addClass("showplus");
          }
  }
  // Toggle to show and hide content below the link
  function toggle_visibility(id) {
     var e = document.getElementById(id);
     if(e.style.display == 'block') {
        e.style.display = 'none';
     } else {
        e.style.display = 'block';
     }
  }
  </code></pre>
  
  <p>And below is the html for the content.....</p>
  
  <pre><code>&lt;div class="teamdetail"&gt;
      &lt;a href="javascript:void(0)" onclick="toggle_visibility('team4'); toggle_plus('team4Plus');"&gt;More Details [&lt;span id="team4Plus" class="showplus"&gt;&lt;/span&gt;]&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="team4" class="teamtxt"&gt;
      Text Goes Here
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS for the showplus and showminus</p>
  
  <pre><code>.showminus:before { content: '-'; } 
  .showplus:before { content: '+'; }  
  </code></pre>