Response title
This is preview!
:visible and :hidden mixup
Answered
- Need more info
- Working on it
- Answered
in Using jQuery
•
10 years ago
I get a result I don't expect here. Can anyone shed light on this. I figured if the next element has display none on it then it won't slide up and then down again. But when I put a console.log message in there to get the css display property it says "none" but still animates the element. What is going on here? Maybe I a misunderstanding the :visible and :hidden selectors but they seem pretty straight forward.
Thanks,
Jeff
$(function() {
var clicker = $('#test-list').find('dt');
$(clicker).bind('click', function() {
if ( $(this).next('dd:visible') ) {
return;
}
else {
$('dd:visible').slideUp('slow');
$(this).next('dd').slideDown('slow')
}
});
});
<dl id="test-list">
<dt>test animation</dt>
<dd style="di">
<ul>
<li>Test definition</li>
<li>Test definition</li>
<li>Test definition</li>
<li>Test definition</li>
</ul>
</dd>
<dt>test animation</dt>
<dd>
<ul>
<li>Test definition</li>
<li>Test definition</li>
<li>Test definition</li>
<li>Test definition</li>
</ul>
</dd>
<dt>test animation</dt>
<dd>
<ul>
<li>Test definition</li>
<li>Test definition</li>
<li>Test definition</li>
<li>Test definition</li>
</ul>
</dd>
</dl>
1