I'm using jquery (v2.2.4) slideUp() and slideDown() to show/hide a <details> tag. Inside <details> are 3 divs with different content: one shows recent posts, another recent comments, and the third shows a search field. There's an <a> tag for each button, which also checks if the sub content divs are active or not and to add or remove classes accordingly.
While the jquery works as far as revealing and hiding the <details>, 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.
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.
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 margin and padding. I thought it might be a float issue but I do have a clearfix on <ul> tags using pseudo elements and display:table for display issues with floated <li>.
Advice welcome.
HTML/PHP:
<div id="tips-nav" class="wrap cf" role="complementary">
<nav class="tips-navigation">
<ul>
<li id="post-link"><a id="post-link-a">post</a></li>
<li id="comment-link"><a id="comment-link-a">comment</a></li>
<li id="search-link"><a id="search-link-a">search</a></li>
</ul>
</nav>
<details id="tip-nav-content" class="wrap cf">
<div id="post-content">
<header>
<h4>recent posts</h4>
</header>
<ul id="pc-post-ul" class="tip-nav-ul cf">
<?php
$args = array(
'numberposts' => '5',
'post_type' => 'tips',
'offset' => '0',
'orderby' => 'post_date',
'order' => 'DESC',
'post_status' => 'publish'
);
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
echo '<li><div class="tip-nav-thumb">' . get_the_post_thumbnail($recent["ID"], 'tip-nav-thumb') . '</div><p>' . get_the_title($recent["ID"]) . '</p><p>' . get_the_time('l, F j, Y', $recent["ID"]) .'</p>' . '<a class="clickBlock" href="' . get_permalink($recent["ID"]) . '"></a></li>';
}
?>
</ul>
<a class="kill-tn-content">close</a>
</div>
<div id="comment-content">
<header>
<h4>recent comments</h4>
</header>
<ul id="pc-comment-ul" class="tip-nav-ul cf">
<?php recent_comments(); ?>
</ul>
<a class="kill-tn-content">close</a>
</div>
<div id="search-content">
<header>
<h4>search for stuff</h4>
</header>
<div class="search-bar">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><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;"/>
<input type="submit" id="searchsubmit" value="g" class="btn" />
</div>
</form>
</div>
<a class="kill-tn-content">close</a>
</div>
</details>
</div>
jquery:
$('#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();
});
CSS:
#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; }
I found the problem so figured I'd post it if anyone else runs into this.
The content divs had some old CSS from a test I did swapping classes qith Jquery and using CSS transitions. That doesn't work right so I went to using slideUp() and slideDown(). I forgot to remove those transitions once I added the jquery which seems to have caused the glitch. Once I removed the CSS transitions there was no more jumping and everything animates smoothly now.