title: How do I toggle CSS with jQuery?
body: <p>I have the following code:</p>
  
  <pre><code>$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});
  </code></pre>
  
  <p>That is triggered by a click.function().</p>
  
  <p>I would like that to be a toggle - so when I click the element, it changes the border to what I have above...but when it is clicked again it disappears or rather sets the border to ' '.</p>
  
  <p>Thoughts?</p>
  
  <p>Edit: I should have been explicit...but I don't want to create a CSS class. The reason being is because when I do that, it messes up the formatting of the element being styled. I am sure that it is some small quirk somewhere that would fix it, but I am not interested in wading through the entire code base to fix little positioning issues with a new class. I would much rather just edit the css attribute directly - because it doesn't interfere with the layout.</p>
  
  <p>Edit2: Here is the <a href="http://jsfiddle.net/BMWZd/4/" rel="noreferrer">jsfiddle of the code</a> I am trying to edit. If you notice, I have the CSS attributes last. But how do I let that be toggled ?</p>
  
  <p>Edit3: If anyone is interested...the UI that this will be used in is for my webapp - <a href="http://www.compversions.com" rel="noreferrer">http://www.compversions.com</a> </p>