Hi I would like to add a plus and minus icons to my expandable tabs. I was thinking using css or javascript to replace an icon when the tab is click but I have no idea how to go about it 

This is what I have so far 
HTML

```
<h1>Responsive Tabs</h1>

<div class="tabBox">
<ul class="tabs">
    <li><a href="#tab1">Test1</a>
    </li>
    <li><a href="#tab2">Test2</a>
    </li>
    <li><a href="#tab3">Test3</a>
    </li>
</ul>
<div class="tabContainer"> <a onclick="toggle('tab1');" href="#tab1">Test1</a> 
    <div id="tab1" class="tabContent" style="display:none;">Test1</div>
<a onclick="toggle('tab2');" href="#tab2">Test2</a>

    <div id="tab2" class="tabContent" style="display:none;">Test2</div>
<a onclick="toggle('tab3');" href="#tab3">Test3</a>

    <div id="tab3" class="tabContent" style="display:none;">Test3</div>
</div>
</div> 

```

JavaScript

```
      $(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();

$("ul.tabs li").click(function () {
  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");
  $(".tabContent").hide();
  var activeTab = $(this).find("a").attr("href");
  $(activeTab).fadeIn();
  return false;
    });

  function toggle(target) {

  var artz = document.getElementsByClassName('tabContent');
  var targ = document.getElementById(target);
  var isVis = targ.style.display == 'block';

  // hide all
  for (var i = 0; i < artz.length; i++) {
      artz[i].style.display = 'none';
  }
  // toggle current
  targ.style.display = isVis ? 'none' : 'block';

  return false;
  }

```

The rest in on my jfiddle: <http://jsfiddle.net/Jnewguy/5B5KJ/63/>