Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.
    Last edited by Bobrooney; 12-08-2013 at 08:01 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •