Hiding a revealing text in a page

Curiosityx · 31 Aug 2006 at 18:03

Greetings, im looking for a way to create a link when clicked exposes text below it on the page

Ie:

Link when clicked displays hidden text below >>>> Archived News

\/
\/
\/
\/

TextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextvTextTextText

Any help would be greatly appreciated.

MastermindUK · 31 Aug 2006 at 18:10

You can either use a bit of javascript to toggle the style display property from block to none, or you could looking into using script.aculo.us.

Something like
HTML in you link: onclick="toggle('mydiv')"

Javascript:
function toggle(id){
el = document.getElementById(id)
if(el.style.display == "none"){
el.style.display = "block"
}else{
el.style.display = "none"
}
}

I haven't tested that, but something like it should do.

Curiosityx · 31 Aug 2006 at 18:17

Thanks for the reply, you dont happen to have a link to a tutorial explaining the process do you?

Curiosityx · 31 Aug 2006 at 18:24

Ive found an artical which achieves a similar purpose

<div style="position:relative; width:100px; color:#DC6000; cursor:hand"
onclick="document.getElementById('Submenu').style.display='block'"
onclick="document.getElementById('Submenu').style.display='none'">

<b>Main Menu</b><br/>

<div id="Submenu" style="position:relative; display:none" >
<a href="url">Menu Item 1</a><br/>
<a href="url">Menu Item 2</a><br/>
<a href="url">Menu Item 3</a><br/>
<a href="url">Menu Item 4</a><br/>
<a href="url">Menu Item 5</a><br/>
</div>

</div>

<p>Other page content...</p>

Ive changed the variables "onmouseover" and "onmouseout" to "onlick" which when clicked does display the text below but im unsure of how to hide it again when clicked once more.

Mr_L · 31 Aug 2006 at 18:24

domCollapse

Curiosityx · 31 Aug 2006 at 18:26

Mr_L said:
domCollapse

Legend!

Edit: My head hurts!

Curiosityx · 31 Aug 2006 at 19:16

Unfortuanlty as my coding ability is not as advanced as id hoped im having trouble getting this to work at all.

MastermindUK · 31 Aug 2006 at 19:21

Can you give a bit of detail on how far you've got?

Curiosityx · 31 Aug 2006 at 22:29

MastermindUK said:
Can you give a bit of detail on how far you've got?

Im usure of working with elements, ive had a look at the code on the domcollapse site but cant get it to corrolate with what im working on.

MastermindUK · 31 Aug 2006 at 23:33

domCollapse works by using Javascript to change the classes of elements so you'll need some relevant CSS for the classes used, trigger and expanded for the link and show and hide for the element you want to toggle. That's what I understand at least.

So something like this might work:
<html>
<head>
<script type="text/javascript" src="domcollapse.js"></script>
</head>
<body>
<ul>
<li class="trigger">Archives</li>
<li>Stuff you want to say about archives</li>
</ul>
</body>
</html>

You should be able to use the CSS that's in the zip file for show and hide styles.

Curiosityx · 1 Sep 2006 at 00:53

MastermindUK said:
domCollapse works by using Javascript to change the classes of elements so you'll need some relevant CSS for the classes used, trigger and expanded for the link and show and hide for the element you want to toggle. That's what I understand at least.

So something like this might work:
<html>
<head>
<script type="text/javascript" src="domcollapse.js"></script>
</head>
<body>
<ul>
<li class="trigger">Archives</li>
<li>Stuff you want to say about archives</li>
</ul>
</body>
</html>

You should be able to use the CSS that's in the zip file for show and hide styles.

Many thanks for your help guys, learnt something new! cheers