Search bar - when open X appears, when closed X disappears
When the search bar is clicked it opens to a greater width. I'm using the :focus selector and a transition effect to achieve this. However, I also want a little X to appear to the side of the search bar when <input> is clicked and for X to disappear when the input is closed. (Clicking anywhere outside the input removes the :focus so in reality the x is just a bit of non functional eye-candy). The problem is that at this stage the X permanently stays after the input has been clicked. The solution should be very simple but I just can't figure it out.
I've tried to use toggle/ add/ remove a class on the <span> wrapping the X but without luck. I suppose I could do something like add a class on the <input> when clicked and then due something like this .toggleClass( className, addOrRemove ); on the <span> wrapping the X.
Here is a jsfiddle that might better explain. Note that before clicking the <input> there is no X. After clicking an X appears to the right.