script.aculo.us toggle appear on multiple div's

Question

I got into a bit of a mess with my code and I hoped you guys could help me out with a clever idea.

So, I am working an a html page and using scriptaculous to make some div's appear and fade using the toggle effect. The things is, for this to work, you of course have to use style="display: none" in your div, but this creates an issue with my slideshow. Let me show you how it looks:

- My menu

        <li>
            <ul>
                <li><a href="#" onclick="Effect.toggle('aboutDiv', 'appear'); return false;"></a>
                </li>
                <li><a href="#" onclick="Effect.toggle('missionDiv', 'appear'); return false;"></a>
                </li>
                <li><a href="#" onclick="Effect.toggle('portfolioDiv', 'appear'); return false;"></a>
                </li>
                <li><a href="#" onclick="Effect.toggle('contactDiv', 'appear'); return false;"></a>
                </li>
            </ul>
        </li>

My divs

<div id="portfolioDiv" style="display: none">
<a href="#" class="close" onclick="Effect.toggle('portfolioDiv', 'appear'); return false;">&#10006;</a>
    <!-- 630px X 430px -->
    <div id="slideDiv">
        <ul>
            <li>
                <img src="image/img1.jpg" alt="" /></li>
            <li>
                <img src="image/img2.jpg" alt="" /></li>
            <li>
                <img src="image/img1.jpg" alt="" /></li>
            <li>
                <img src="image/img2.jpg" alt="" /></li>
            <li>
                <img src="image/img1.jpg" alt="" /></li>
            <li>
                <img src="image/img2.jpg" alt="" />
            </li>
        </ul>
    </div>
</div>

- CSS

#portfolioDiv
{
    position: absolute;
    height: 700px;
    width: 430px;
    left: 3%;
    top: 16%;
    border: 1px solid red;
    overflow: hidden;      
}

#slideDiv
{
    position: absolute;
    height: 630px;
    width: 430px;
    top: 70px;
    border: 1px solid black;
    overflow: hidden;
    margin: 0;
    padding: 0px;
}

- The problem

- I'm using Horinaja slideshow.

When I use style="display: none" on the portfolioDiv, the slideshow does not work. When I use style="display: none" on my slideDiv it does. I can't seem to understand what's causing this issue.

- Tried solution

To try and fix this, I wanted to seperate the 2 divs (portfolioDiv and slideDiv) and then place them individually, instead of putting slideDiv within portfolioDiv, but then I need to using Effect.toggle with Effect.multiple in my menu with the onclick, but I was unable to do so, because I don't know how to basically.

Hope you are able to help me somehow, thanks.

Answer 1

I solved it be using:

<a href="#" onclick="Effect.multiple(['portfolioDiv','slideDiv'],function(el){Effect.toggle(el,'appear');});">