Animating Height of Parent Hides Select Options

Question

When I focus on a select box I want the hidden tooltip to appear. When I click on the select box the animation starts but the option list is hidden. How I get round this?

<style>
.showme {display:none;}
li {height:25px;background:red; }
select{z-index:100;}
p{margin:0px;padding:0px;}
</style>
<script type="application/javascript">
$(document).ready(function() {

    $("select")
        .focus(function(){
            var myParent = $(this).parent("li");
            var myInfo = $(this).siblings(".showme");

            $(myParent).data("myoldheight", $(myParent).height());

            $(myInfo).css("display","block");                               
            var totalHeight = $(myParent).height() + $(myInfo).height();

            $(myParent).animate({
                "height": totalHeight + "px"                               
            },3000,function() {console.log("animated");})               
        })

        .blur(function() {

            $($(this).parent("li")).animate({
                "height": $(this).parent("li").data("myoldheight") + "px"                              
            },500) 

            $(this).siblings(".showme").hide();
        })
        })
</script>
<form>
<ul>
<li>
<label for="test">Test</label>
<select id="test" name="test">
    <option value=""></option>
    <option value="a">a</option>
    <option value="b">b</option>
</select>
<p class="showme">This is my text</p>    
</li>
</ul>
</form>

Answer 1

I think you're approaching the problem / markup wrong. Try segmenting the structure a bit so you're not animating the parent. For instance:

HTML:

<select id="selSomething">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div class="tooltip">More information!</div>

Javascript:

 $(document).ready(function() {
      $('#selSomething').focus(function() {
          var $tip = $(this).next('.tooltip');
          if($tip.length > 0) {
            $tip.slideDown();
          }
      });
      $('#selSomething').blur(function() {
          var $tip = $(this).next('.tooltip');
          if($tip.length > 0) {
            $tip.slideUp();
          }
      })
  });

Remember, simplicity is perfection :)