Hide div onload, show onclick?

Hi all,

I apologise for asking this question, have searched for and found several thread solving this question however I can never get the solutions given to work, I have no idea what I'm doing wrong.. could it possibly have something to do with using prototype/scriptaculous at the same time??

current classes that effect this problem in css file:

.hidden{
display:none;
}

.shown{
}


<div id="splashtext">
<a href="#none" onclick="$('bodytext').fade();$('portfolio').appear({delay: 0.8});$('contact').fade();$('about').fade(); return false;">portfolio</a>
</div>

<div id="portfolio" class="hidden">
portfolio text
</div>


when portfolio is clicked, I need the portfolio div to change to
<div id="portfolio" class="shown"> ..... is this possible?

<div id="portfolio" class="hidden">
portfolio text
</div>
when portfolio is clicked, I need the portfolio div to change to
<div id="portfolio" class="hidden">Sorry, your intention is not clear.

apologies, have edited original post.

should have in fact been

when portfolio is clicked, I need the portfolio div to change to
<div id="portfolio" class="shown">

I don't know if this is what you want - toggle visibility.

<a href="#" onclick = "toggle()">Show or hide the portfolio</a>
<div id="portfolio" class = "hidden" style="display:none">
Portfolio text - but don't display me yet
</div>

<script type = "text/javascript">

function toggle(){
var divn1 = document.getElementById("portfolio");
if (divn1.style.display == "none") {
divn1.style.display = "block";
}
else {
divn1.style.display = "none";
}
}

</script>


I heard him then, for I had just
Completed my design
To keep the Menai Bridge from rust
By boiling it in wine.
- Lewis Carroll

<script type="text/javascript">
window.onload=function(){
var elm= document.getElementById('portfolio');
elm.className='shown';
}
</script>
You might need to adjust the above in such way a that it won't interfere with other onload even handlers, if any.

Philip M, when I tried your solution, it simply showed "show or hide the portfolio"... when it was clicked that text disappeared.... "Portfolio text - but don't display me yet" never showed up


abduraooft, so i place <script type="text/javascript">
window.onload=function(){
var elm= document.getElementById('portfolio');
elm.className='shown';
}
</script> in the head? what do i add to the onlick part of the link?




not sure wether this will help but this is the page (http://loganwillmott.com/indextest8.html) where the about, portfolio and contact divs are hidden.. I need them to be shown when the appropriate link is clicked on the right



.... and here is the mess (http://loganwillmott.com/indextest9.html) i am trying to fix by initially having those divs hidden

Philip M, when I tried your solution, it simply showed "show or hide the portfolio"... when it was clicked that text disappeared.... "Portfolio text - but don't display me yet" never showed up
[I]


Well, it works just fine for me. :)

Is it that the class = "hidden" is affecting it?

sorry yes my apologies, it does work.. However I can only get it working on a page by itself :confused:

How do I add the toggle() to the portfolio tag along with what is already there?

I have tried this but it doesnt seem to work?
<a href="#" onclick="$('bodytext').fade();$('portfolio').appear({delay: 0.8});$('contact').fade();$('about').fade(); return false;toggle()">portfolio</a><br />

You need to add it before return false;
<a href="#" onclick="$('bodytext').fade();$('portfolio').appear({delay: 0.8});$('contact').fade();$('about').fade(); toggle(); return false;">portfolio</a><br />

I'm not sure why this is happening, as this works fine on its own: <a href="#" onclick = "toggle()">Show or hide the portfolio</a>
<div id="portfolio" class = "hidden" style="display:none">
Portfolio text - but don't display me yet
</div>

<script type = "text/javascript">

function toggle(){
var divn1 = document.getElementById("portfolio");
if (divn1.style.display == "none") {
divn1.style.display = "block";
}
else {
divn1.style.display = "none";
}
}

</script>
however when I try to add it into the content already shown, the text "Show or hide the portfolio" is the only thing that disappears when it is clicked?

shown here (www.loganwillmott.com/indextest10.html) ("Show or hide the portfolio" is located at the top of the text thats shown on page load)