I want to add on my website where I can hide content, and have a more button that the user can click if they want to see the additional information. If you are unsure of what I am talking go to rottentomatoes and click any movie. Then it will have it under the description section.

http://www.dustindiaz.com/seven-togglers/

its not working out for me.. a bit confused here.

Ok, very very simple bit of code to show the basic principle.

<div onclick="document.getElementById('hidden').style.visibility='visible';" >Show hidden text</div>
<div id="hidden" style="visibility:hidden;"> This is hidden until a click shows it</div>

I found this one that works great, and its what I was looking for. Your page lead me to it. Thanks for the help.

My only problem now is that my page loads again when I click it. I dont want it to again, just show the content without having to scroll looking for it again. You know what I mean?

is there an added code I can do to fix that?

I think the term is "slide" out? haha I dont know. I've been doing websites for a while, but not much coding. Just basic stuff.

My only problem now is that my page loads again when I click it. I dont want it to again, just show the content without having to scroll looking for it again. You know what I mean

I'd be guessing at this because I have no idea what code you are using, but I'd suggest you are using a link to show the hidden element rather than a element onclick event.

This is a sample of my code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

Then:

<div id="extend" style='display:none;'>Content.................</div>

<a href="#" onclick="toggle_visibility('extend');">[More]</a>

having href="#" will make the current page reload when it is clicked so the element will "reappear"

but I'd suggest you are using a link to show the hidden element rather than a element onclick event

Pretty good guess doncha think?

haha yup. pretty good.

What would be the code to put in there?

just leave out the href completely or use a span/div with an onclick event as my code does.

If you want the cursor to change, add cursor: pointer; to a style rule for that element.

Awesome, that worked great. I should of listened sooner haha.

Is there a way I can get rid of the space it creates? It kind of puts the text space in there, but you just cannot see it until I click "more" and it fills it in.

Here is a link to the page, so you can maybe get an idea of what I am talking about.

http://www.exclusivetent.info/technical

Look under the 80% Shade Fly section, that is the only part that works for now. There is that space. Is it possible to put the More right after the word "end"? Then once clicked it gets extended down? Then once clicked again it will go away.

Sorry for being so picky.. haha

set the style to display:none; initially.

not working out ...

I had an ah ha moment, and figured it out. Thanks for all your help Chris!

http://www.modtalk.co.uk/_site/code/.../text-element/

code is in the source.

Should really have refreshed the page instead of listening to the radio

Originally Posted by bdg1115

haha yup. pretty good.

What would be the code to put in there?

Make the link on your href="javascript:void(0)"

that way it wont do anything when you click but it is technically still a link.