Click event doesn't fire up

[kayut]

Hi,

Looking at this Plunker example:

slideToggle example

I want that if I click on one of the select boxes, the next div right after it, slides up. To achieve this, I wrote this code:

// Event Delegation
  $('#container').on('click', '.my-select', function() {
    $(this).next(".my-div").slideToggle();
  });

It works fine. But I have to click a select box twice to fire up the slideToggle event. Why is that and how can I fix it?

Thanks

[jscheuer1]

I'm not seeing that. What browser? I do notice that you see the option list when you click a select that isn't currently displaying its list of options. Each one has only the one option, but it seems unnecessary and distracting. You can set the options' display none in style. I also notice that you have .focus() in your code on the div. You cannot technically focus on a non-form element. You could blur the select:

  // Event Delegation
  $('#container').on('click', '.my-select', function() {
    $(this).blur().next(".my-div").slideToggle();
  });

But having set the options' display none in style:

.my-select option {display: none;}

even using blur seems unnecessary:

  // Event Delegation
  $('#container').on('click', '.my-select', function() {
    $(this).next(".my-div").slideToggle();
  });

as the focus now shows the active element (one last clicked).

Edit: I tried this in Opera (like Chrome), and it was good as above, but in IE the blur seems preferable and the display none on the options unnecessary, but for cross compatibility I would keep both.

Edit: But in Firefox the display none on the options is bad, can't see the question's text at all, so using just the blur for all would be a decent compromise, but you still get the drop down of the select list in Firefox

Perhaps using another element instead of a select would be good, like an A tag or a DIV. Form elements often do not behave consistently cross browser.

[kayut]

@jscheuer1,
WHAT A GREAT ANSWER!
Thank you so much!