Hide div onload, show onclick?

[111buddy11]

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?

[abduraooft]

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

[111buddy11]

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

[Philip M]

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

[abduraooft]

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

[111buddy11]

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 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 i am trying to fix by initially having those divs hidden

[Philip M]

Originally Posted by 111buddy11

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?

[111buddy11]

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

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

[abduraooft]

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

[111buddy11]

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 ("Show or hide the portfolio" is located at the top of the text thats shown on page load)