JQuery -- Slide Effect and Layering Spans
I have two spans laid out side by side. What I want is for the span on the right to "slide" under the span on the left.
The problem with the code below is that the right-span can't get under the left-span, so it has to skip a line and then slide into being invisible.
I've tried using z-index and a number of other fixes and nothing seems to be working -- the issue appears to have something to do with the borders of each element.
Can anyone help out?
Thanks,
Chris
Here's the code I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<script src="<a href="http://code.jquery.com/jquery-latest.js" target="_blank">http://code.jquery.com/jquery-latest.js</a>"></script>
<script src="<a href="http://ui.jquery.com/latest/ui/ui.core.js" target="_blank">http://ui.jquery.com/latest/ui/ui.core.js</a>"></<div id=":1ei" class="ArwC7c ckChnd">script>
<script src="<a href="http://ui.jquery.com/latest/ui/effects.core.js" target="_blank">http://ui.jquery.com/latest/ui/effects.core.js</a>"></
script>
<script src="<a href="http://ui.jquery.com/latest/ui/effects.slide.js" target="_blank">http://ui.jquery.com/latest/ui/effects.slide.js</a>"></
script
<script>
$(document).ready(function(){
$(".link_div_1").click(function() {
$(".link_span_1").toggle("slide",{}, 500);
});
});
</script>
<style>
.link_div_1 {
text-padding: 1px;
}
.link_span_1 {
text-padding: 1px;
}
</style>
</head>
<body>
<span class="link_div_1">Hey</span>
<span class="link_span_1">Test Span 2</span>
</body>
</html></div>