title: How to create round plus minus using css?
body: <p>I have the following code which has plus and minus image to display toggle, how can make this purely CSS based so plus and minus are bold and circular and not image based.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="toggle"&gt;
  Show and hide &lt; plus minus icon will show here&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>toggle{
      display:inline-block;
      /*height:48px;
      width:48px;*/
      background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png") no-repeat scroll 183px 0 transparent
  }
  .toggle:after{
      content:"View All";
      display:block;
      height:48px;
      line-height:48px;
      width:288px;
      margin-left:48px;
  
  }
  .toggle.expanded:after{
       content:"Close All ";
  }
  .toggle.expanded {
    background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png") no-repeat scroll 183px 0 ;
  
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$(document).ready(function() {
    var $content = $("div.moreinfo").hide();
  
    $(".toggle").on("click", function(e) {
       $(this).toggleClass("expanded");
       if ($(this).hasClass('expanded')) {
          $("div.plus").hide().removeClass("closed");
          $("div.minus").show().addClass("opened");
          e.preventDefault();
       } else {
          $("div.plus").show().addClass("closed");
          $("div.minus").hide().removeClass("opened");
          e.preventDefault();
  
       }
       $content.slideToggle();
  
    });
  });
  </code></pre>