使用javascript或jquery切换效果运动

Question

I fund a toggle code that works perfectly, but I'd like to add a speed effect to slow it down a bit it when opening and closing. I did try to insert this code on it <p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p> instead of <h1>OPEN</h1> but without success.

I've a joomla website, some plugins use jquery. It seems that Jquery could do the trick with something like .toggle( [duration ] [, complete ] ) I've seen that JQ is a "Javascript's library", so it should work with the code bellow but no idea how I should insert it. I don't know if "simply" adding jquery code inside the code below would work, or if I should add something else in the FTP website some XX.js files (as I have seen in some 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!

Answer 1

Since you are using jquery make some minor changes to the mark up for 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

Answer 2

for joomla :

1/ add in the index.php just after the tag this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript"></script>

2/ create in the ftp a file called app.js and write in it:

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

3/ in the article source code :

<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>