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

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -