[Help] Expandable div's (javascript)

[notebook]

Dear members of this forum,

I've created expandable Div's using this tutorial.
http://www.dynamicdrive.com/dynamici...edcollapse.htm

When I was busy I found out that it's not possible to toggle several Div's at once, it is only possible to expand several Div's at once with separated buttons for expanding and collapsing.

I tried something with the javascript but was not able to manage it.

Can someone help me to toggel several Div's at once with the "toggle" function?

Thanks in advance!!

[3Nex]

Ok, i didn't read the whole tutorial, but from what i can see by just glancing at it, is that the tutorial uses jQuery library, but also a jQuery plugin called animatedcollapse... Is that right?

I don't see the need for that and i have no idea why someone wrote a plugin for doing something that jQuery already has built in. So instead of using that plugin, you can only implement jQuery and then simply achieve this same behavior by calling:

$("#jason").toggle();

This simple call will toggle a div with id="jason". Toggle means it will show it if hidden, and hide if shown.

Now, if you want to toggle more divs at the same time, you have two choices.

Your first choice:

You will define 3 divs with different id's. First div has id="jason", second has id="david" and third has id="bananas". And then you can call the toggle method on divs with all 3 id's together, like this:

$("#jason, #david, #bananas").toggle();

Your second choice:

You can drop the id's and use classes instead. Because the HTML specification doesn't allow you to use the same id for more than one element, calling a method on an id will only affect one element. This changes with classes, because you can use the same class on any number of div's.

So again define 3 divs, but give all of them the same class, class="jason". Then call the toggle method on class jason, like this:

$(".jason").toggle();

I've uploaded a working example of this for you here: http://webpark.hr/temp-js/toggles.php

Now if you want animation, you can simple replace the toggle() method, with slideToggle() or fadeToggle() etc...

[notebook]

First of all, thanks for your response!

The way to do it in jquery is indeed alot easier.
I'm using a script in my website wich for some reasons blocks to jquery

This is the script i'm using:

var iWebkit;if(!iWebkit){iWebkit=window.onload=function(){function fullscreen(){var a=document.getElementsByTagName("a");for(var i=0;i<a.length;i++){if(a[i].className.match("noeffect")){}else{a[i].onclick=function(){window.location=this.getAttribute("href");return false}}}}function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){fullscreen();hideURLbar()};iWebkit.init()}}

When I remove this script from my website the jquery boxes do work :S

The example you gave is very clear, thanks for that.