javascript - ajax loading file with slideToggle effect -
i loading text files in div container, , i've made work far. wish animate slidetoggle effect. webpage looks like:
<div id="content" style="width: 75%"> <?php foreach(new directoryiterator('uploads/temp') $file) { if(!$file->isdot()) { echo '<a href="#" onmousedown="javascript:ajax.query( \'view.php?file=uploads/temp/'.$file.'\',\'file\')">'.$file.'</a> '; } } ?> <div id="file" style="text-align: justify"></div> </div>
how apply slidetoggle function links? can check actual webpage here
many thanks
you'll need attach callback event ajax request, slide animation not occur until content has loaded. using jquery's built-in ajax , event functionality this:
<?php foreach... { // removed onmousedown, event attached using pure jquery echo '<a href="#">'.$file.'</a> '; } ?> <script type="text/javascript"> // attach click event listener links inside id="content" $("#content a").live("click", function(e) { // perform simple ajax call based on link contents $.get('view.php?file=uploads/temp/'+$(this).text(), function(html) { // hide div, populate content, , perform animation $("#file") .hide() .html(html) .slidedown(); }); }); </script>
Comments
Post a Comment