Jquery Show Hide Problems Using A Select Box/dropdown

I have a word inside of a div. that's part of a drop down but the drop down is hidden, the specific focus is on 'DC' right now... in the image below were looking at sales: HTML: &l

Solution 1:

Since it is a <select> element, .focusout() will do just fine.

$('.look').click(function(){
    $(this).hide();
    $('.touch').show().focus();
});

$('.touch').focusout(function(){
   $(this).hide();
   $('.look').show();
});

---

If it's firing multiple element with the same class, you just need a better selector. I noticed there are set of '.look' and '.touch' for each <td>. You can use .siblings() to find the element on the same parent <td> only.

$('.look').click(function(){
    $(this).hide();
    $(this).siblings('.touch').show().focus().focusout(function(){
        $(this).hide();
        $(this).siblings('.look').show();
    });
});

I've updated the fiddle as well