Hide and show div element with prototype and scriptaculous

Question

I'm trying to use prototype and scriptaculous to hide and display a div element but the function (below) to take advantage of the prototype setStyle property isn't working and I'm not sure what the problem is.

<script type="text/javascript" language="javascript">
    function bodyOnload() {
      $('content1').setStyle({ display: 'none' });
      $('content2').setStyle({ display: 'none' });
    }
</script>    



<script type="text/javascript" language="javascript">

    var currentId = null;

    Effect.Accordion = function (contentId) {
     var slideDown = 0.5;
     var slideUp = 0.5;

     contentId = $(contentId);

     if (currentId != contentId) {
      if (currentId == null) {
       new Effect.SlideDown(contentId, {duration: slideDown});
       } else {
       new Effect.SlideUp(currentId, {duration: slideUp});
       new Effect.SlideDown(contentId, {duration: slideDown});
      }
      currentId = contentId; 
     } else {
      new Effect.SlideUp(currentId, {duration: slideUp});
      currentId = null;
     }
    };
    </script>

The preceding function is called as such:

<div id="accordion">
    <div id="part1">
        <div id="nav1" onclick="new Effect.Accordion('content1');">
            Post a comment 1
        </div>
        <div id="content1">
            <form id="form" name="form" action="post.php" method="post">
            <textarea name="commentbody" cols="20" rows="10"></textarea>
            <button type="submit">Post Comment</button>
            <input type="hidden" name="blogID" value="1" />
            <input type="hidden" name="userID" value="3" />
            <input type="hidden" name="parentID" value="7" />
            <div class="spacer"></div></form>
        </div>
    </div>
     <div id="part2">
        <div id="nav2" onclick="new Effect.Accordion('content2');">
            Post a comment 2
        </div>
        <div id="content2">
            <form id="form" name="form" action="post.php" method="post">
            <textarea name="commentbody" cols="20" rows="10"></textarea>
            <button type="submit">Post Comment</button>
            <input type="hidden" name="blogID" value="1" />
            <input type="hidden" name="userID" value="3" />
            <input type="hidden" name="parentID" value="7" />
            <div class="spacer"></div></form>
        </div>
    </div>
</div>

Here's what happens with the code.

• In both ie and firefox it does nothing but when you click on the link that calls the effect.accordion method the method works as expected. The problem is with the prototype function which doesn't hide the elements. Any help with be greatly appreciated.

Answer 1

If you want to initially hide elements, its not enough to write the "function bodyOnload". This function should be called at page load by using something like that:

window.onload = bodyOnload;

And, of course, I advise you to give jQuery a try :)

Answer 2

maxnk already covered the main issue.

But, Prototype recommends using the dom:loaded event instead of window.onload:

document.observe("dom:loaded", bodyOnload);

Also, you might try Prototype's Element#toggle or Element#hide instead of Element#setStyle (unless the warning on each page applies to your CSS).

function bodyOnload() {
    $('content1').hide();
    $('content2').hide();
}

Answer 3

Great! it now works. You know this is an example in a book I was trying to learn from. The author neglected this very important part just as he misleadingly said that the best way to reference the effects library in scriptaculous is like so:

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>

instead of like:

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>

The book has great reviews on amazon but I don't think any of the reviewers have tried to use the book. They all review for its volume and not the substance of the book. All the examples I've tried to use in the book have not worked. I've had to go on and figure it out for myself. I guess you could say that I have to read other parts of the book to understand a certain example but for a book that big can one actually do that. If I have to know something the author mentioned before shouldn't I be reminded about it, at least in terms of a book so big that is in fact kind of a reference book? In case you're wondering: Ajax: The Definitive Guide, by Anthony T. Holdener III

Update: The author used an older version of the Scriptaculous and Prototype libraries that's why there was a misunderstanding. If you get this book try to keep this in mind. I actually now have a deap respect for the book, if only for its share volume.

Answer 4

Hi,

Thanks for these application of SlideUp and SlideDown.

An important remark : it doesn't work under ie7 and ie8 if you don't set a width for the div you want to show or hide.

Vincent