jQuery addClass after / Before
<pre><code>&lt;div id="box"&gt;&lt;/div&gt;
&lt;div class="text"&gt;&lt;/div&gt;?



$(document).ready(function () { 
$('#box').click(function () {
      $('.text').slideToggle('slow');
  });


});


#box{
height:40px;
width:100px;
background:red;
}

#box:hover{background:blue;}

#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}


#box:hover:after{

border-top-color: blue;
}

.text{

display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}
</code></pre>

<p><a href="http://jsfiddle.net/zfQvD/16/" rel="nofollow">http://jsfiddle.net/zfQvD/16/</a></p>

<p>Is that possible to use jQuery to add the styled <code>after</code> arrow?
when <code>text class</code> is closed, remove <code>after</code> arrow class
if <code>text class</code> is shown, then add the arrow?
I tried, but seems doesn't work</p>
