toggle effect motion using javascript or jquery -

i fund toggle code works perfectly, i'd add speed effect slow down bit when opening , closing. did try insert code on <p onclick="javascript:settimeout(toggle(), 3000);">open</p> instead of <h1>open</h1> without success.

i've joomla website, plugins use jquery. seems jquery trick .toggle( [duration ] [, complete ] ) i've seen jq "javascript's library", should work code bellow no idea how should insert it. don't know if "simply" adding jquery code inside code below work, or if should add else in ftp website xx.js files (as have seen in tuto). i'm lost...

<script type="text/javascript">     // <![cdata[     function toggle(id, link) {         var elem = document.getelementbyid(id);         var text = document.getelementbyid(link);         if (elem.style.display != "none") {             elem.style.display = "none";             text.innerhtml = "show";         } else {             elem.style.display = "block";             text.innerhtml = "hide";         }     }     // ]]>  </script> <ul>     <li><a id="displaytext" href="javascript:toggle('toggletext', 'displaytext');">show</a>         <div id="toggletext" style="display: none;">             <h1>open</h1>         </div></li>     <li><a id="toggler2" href="javascript:toggle('secondtext', 'toggler2');">show</a>         <div id="secondtext" style="display: none;">             <h1>open</h1>         </div></li>  </ul> 

thanks!

since using jquery make minor changes mark ease of use

<ul id="container">   <li>     <a class="opener">show</a>     <div style="display: none;">       <h1>open</h1>     </div>   </li>    <li>     <a class="opener">show</a>     <div style="display: none;">       <h1>open</h1>     </div>   </li> </ul> 

then

$(function(){   $('#container').on('click', 'a.opener', function(){     $(this).next().toggle('slow')   }); }); 

demo: fiddle