title: Jquery slideUp() slideDown() jump glitch, WordPress
body: <p>I'm using jquery (v2.2.4) <code>slideUp()</code> and <code>slideDown()</code> to show/hide a <code>&lt;details&gt;</code> tag. Inside <code>&lt;details&gt;</code> are 3 divs with different content: one shows recent posts, another recent comments, and the third shows a search field. There's an <code>&lt;a&gt;</code> tag for each button, which also checks if the sub content divs are active or not and to add or remove classes accordingly.</p>
  
  <p>While the jquery works as far as revealing and hiding the <code>&lt;details&gt;</code>, and adding and removing the classes, the slide animation only seems to work for about 5 pixels and then it "jumps" open. Since the content in the divs is dynamic, I can't set a specific height on anything.</p>
  
  <p>I don't think this has anything to do with WordPress specifically, as I've used this in other templates without problem, though I didn't have multiple content areas showing and hiding inside a primary content area.</p>
  
  <p>I'm not sure if this is related to the CSS or the jquery or both—guessing it's some CSS conflict. I checked other topics on here about slide glitches but couldn't see a relation to my problem as far as <code>margin</code> and <code>padding</code>. I thought it might be a <code>float</code> issue but I do have a clearfix on <code>&lt;ul&gt;</code> tags using pseudo elements and <code>display:table</code> for display issues with floated <code>&lt;li&gt;</code>.</p>
  
  <p>Advice welcome.</p>
  
  <p>HTML/PHP:</p>
  
  <pre><code>&lt;div id="tips-nav" class="wrap cf" role="complementary"&gt;
  
      &lt;nav class="tips-navigation"&gt;
          &lt;ul&gt;
              &lt;li id="post-link"&gt;&lt;a id="post-link-a"&gt;post&lt;/a&gt;&lt;/li&gt;
              &lt;li id="comment-link"&gt;&lt;a id="comment-link-a"&gt;comment&lt;/a&gt;&lt;/li&gt;
              &lt;li id="search-link"&gt;&lt;a id="search-link-a"&gt;search&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;details id="tip-nav-content" class="wrap cf"&gt;
          &lt;div id="post-content"&gt;
              &lt;header&gt;
                  &lt;h4&gt;recent posts&lt;/h4&gt;
              &lt;/header&gt;
              &lt;ul id="pc-post-ul" class="tip-nav-ul cf"&gt;
                  &lt;?php
                      $args = array(
                          'numberposts' =&gt; '5',
                          'post_type' =&gt; 'tips',
                          'offset' =&gt; '0',
                          'orderby' =&gt; 'post_date',
                          'order' =&gt; 'DESC',
                          'post_status' =&gt; 'publish'
                      );
                      $recent_posts = wp_get_recent_posts( $args );
                      foreach( $recent_posts as $recent ){
                          echo '&lt;li&gt;&lt;div class="tip-nav-thumb"&gt;' . get_the_post_thumbnail($recent["ID"], 'tip-nav-thumb') . '&lt;/div&gt;&lt;p&gt;' . get_the_title($recent["ID"]) . '&lt;/p&gt;&lt;p&gt;' . get_the_time('l, F j, Y', $recent["ID"]) .'&lt;/p&gt;' . '&lt;a class="clickBlock" href="' . get_permalink($recent["ID"]) . '"&gt;&lt;/a&gt;&lt;/li&gt;';
                      }
                  ?&gt;
              &lt;/ul&gt;
              &lt;a class="kill-tn-content"&gt;close&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="comment-content"&gt;
              &lt;header&gt;
                  &lt;h4&gt;recent comments&lt;/h4&gt;
              &lt;/header&gt;
              &lt;ul id="pc-comment-ul" class="tip-nav-ul cf"&gt;
                  &lt;?php recent_comments(); ?&gt;
              &lt;/ul&gt;
              &lt;a class="kill-tn-content"&gt;close&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="search-content"&gt;
              &lt;header&gt;
                  &lt;h4&gt;search for stuff&lt;/h4&gt;
              &lt;/header&gt;
              &lt;div class="search-bar"&gt;
                  &lt;form method="get" id="searchform" action="&lt;?php bloginfo('home'); ?&gt;/"&gt;
                      &lt;div&gt;&lt;input type="text" name="s" id="s" value="Find some crap" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/&gt;
                      &lt;input type="submit" id="searchsubmit" value="g" class="btn" /&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;a class="kill-tn-content"&gt;close&lt;/a&gt;
          &lt;/div&gt;
      &lt;/details&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('#post-link-a').click(function () {
      if($('#tip-nav-content').is(':hidden')){
          if($('#post-content').hasClass('show-the-content')){
              $('#tip-nav-content').slideDown();
          }
          else {
              $('#search-content').removeClass('show-the-content');
              $('#comment-content').removeClass('show-the-content');
              $('#post-content').addClass('show-the-content');
              $('#tip-nav-content').slideDown();
          }
      }
      else if($('#tip-nav-content').is(':visible')){
          if($('#post-content').hasClass('show-the-content')){
              $('#tip-nav-content').slideUp();
          }
          else {
              $('#search-content').removeClass('show-the-content');
              $('#comment-content').removeClass('show-the-content');
              $('#post-content').addClass('show-the-content');
          }
      }
      else {
          // nada
      }
  });
  $('#comment-link-a').click(function () {
      if($('#tip-nav-content').is(':hidden')){
          if($('#comment-content').hasClass('show-the-content')){
              $('#tip-nav-content').slideDown();
          }
          else {
              $('#search-content').removeClass('show-the-content');
              $('#post-content').removeClass('show-the-content');
              $('#comment-content').addClass('show-the-content');
              $('#tip-nav-content').slideDown();
          }
      }
      else if($('#tip-nav-content').is(':visible')){
          if($('#comment-content').hasClass('show-the-content')){
              $('#tip-nav-content').slideUp();
          }
          else {
              $('#search-content').removeClass('show-the-content');
              $('#post-content').removeClass('show-the-content');
              $('#comment-content').addClass('show-the-content');
          }
      }
      else {
          // nada
      }
  });
  $('#search-link-a').click(function () {
      if($('#tip-nav-content').is(':hidden')){
          if($('#search-content').hasClass('show-the-content')){
              $('#tip-nav-content').slideDown();
          }
          else {
              $('#post-content').removeClass('show-the-content');
              $('#comment-content').removeClass('show-the-content');
              $('#search-content').addClass('show-the-content');
              $('#tip-nav-content').slideDown();
          }
      }
      else if($('#tip-nav-content').is(':visible')){
          if($('#search-content').hasClass('show-the-content')){
              $('#tip-nav-content').slideUp();
          }
          else {
              $('#post-content').removeClass('show-the-content');
              $('#comment-content').removeClass('show-the-content');
              $('#search-content').addClass('show-the-content');
          }
      }
      else {
          // nada
      }
  });
  $('.kill-tn-content').click(function () {
      $('#tip-nav-content').slideUp();
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#tips-nav { position:relative; margin:0; padding:0; background:#E3DECB; } 
  #tip-nav-content { position:relative; display:none; overflow: hidden; margin:0; padding:0; }
  #tip-nav-content:before { content:''; position:absolute; top: -10px; left: -10px; width:105%; height:10px; box-shadow: 0 0 15px rgba(26, 40, 53,.8); }
  
  .tips-navigation { position:relative; height:50px; overflow:hidden; }
  .tips-navigation ul { position:relative; height:50px; margin:0; padding:0; }
  .tips-navigation li { display:block; float:left; text-align: center; background:#1A2835; }
  .tips-navigation li:hover { background:#DB5D3B; }
  .tips-navigation a { display:block; line-height: 49px; padding:0 0 1px; }
  .tips-navigation a:before { font-family:dd_icons !important; font-size:.9em; margin-right:4px; }
  
  #post-content { display:none; }
  #comment-content { display:none; }
  #search-content { display:none; }
  
  .show-the-content { display:block !important; }
  
  #tip-nav-content header { background:#CEC7B3; padding:15px 0; }
  #tip-nav-content h4 { padding:0 20px; margin:0; }
  #post-content h4:before, #comment-content h4:before { content:'T'; font-family: dd_icons; margin-right:7px; display:inline-block; font-size:1.2em; vertical-align: -2px; }
  #search-content h4:before { content:'g'; font-family: dd_icons; margin-right:7px; display:inline-block; font-size:1.2em; vertical-align: -2px; }
  
  .tip-nav-ul { margin:0; }
  .tip-nav-ul li { position:relative; display:block; }
  .tip-nav-ul li:hover { background:#DB5D3B; }
  .tip-nav-ul li:hover a:before { color:#2A3F51; }
  .tip-nav-ul li a { display:inline-block; margin:4px 0 0 0; padding:13px 13px !important; }
  #pc-comment-ul li a { display:block; margin:0; padding:10px 0; font-size:.9em; }
  #pc-comment-ul li:last-of-type { border:none; }
  #pc-comment-ul li { height:initial; border-bottom:1px dashed #AAA48F; }
  .rc-link:before { content:'b'; font-family: dd_icons; color:#898472; display:inline-block; margin-right:4px; }
  #pc-post-ul li { overflow:hidden; padding:7px; border-bottom:1px dashed #AAA48F; }
  #pc-post-ul li:last-of-type { border:none; }
  #pc-comment-ul li:hover, #pc-post-ul li:hover { border-color:#DB5D3B; }
  .tip-nav-ul li p { font-size:.9em; margin:0; color:#DB5D3B; }
  .tip-nav-ul li:hover p { color:#fff; }
  .tip-nav-ul li:hover p + p { color:#ddd; }
  .tip-nav-ul li p + p { font-size:.8em; margin:0; color:initial; }
  .tip-nav-thumb { display:block; float:left; width:52px; height:52px; background:#0F171E; margin-right:10px; }
  
  .cf:before, .cf:after { content: ""; display: table; }
  .cf:after { clear: both; }
  </code></pre>