Heres the HTML:
<div class="wp_syntaxplus">
<div class="wp_synpls_hdr">Test.php</div>
<table><tr><td class="line_numbers">1
2
3</td><td class="code"><?php
echo 'This should expand/collapse';
?></td></tr></table>
<div class="wp_synpls_hdr"><a href='#'>[EXPAND]</a></div>
</div>
The code is hidden thanks to jQuery(".wp_syntaxplus table").hide(); but I can't get it to be shown with the expand a.jQuery(document).ready(function(){
jQuery(".wp_syntaxplus").hover(function() {
var width = jQuery("table", this).width();
var pad = width + 5;
if (width > 590) {
jQuery(this)
.stop(true, false)
.css({
zIndex: "100",
position: "relative"
})
.animate({
width: pad + "px"
});
}
}, function() {
jQuery(this).stop(true, false).animate({
width: 590
});
});
jQuery(".wp_syntaxplus table").hide();
jQuery(".wp_synpls_hdr a").click(function()
{
jQuery(this).prev(".wp_syntaxplus table").slideToggle(600);
});
});