How to show/hide content on a page?

You would have to write your own widget, as you probably know.

1) Put the stuff you want to toggle into a div with a unique id. E.g.

<div id="toggle1">...</div>

2) If you want it to start hidden, add this (using inline style, as shown–don’t hide it via style.css or this won’t work):

<div id="toggle1" style="display:none;">...</div>

3) Add onclick events to the “click for more info”, like this:

<span onclick="if('none'==document.getElementById('toggle1').style.display){document.getElementById('toggle1').style.display='block';}else{document.getElementById('toggle1').style.display='none';}">click for more info</span>

Those are the basics.

Hmm.. yeah, I unfortunately don’t have the knowledge to write my own widget. Thank you for taking the time to post that though, I tried to play with it. =\

I did look around some more and found this script though. It would be perfect, and I think I could adjust it enough for what I want.. but it doesn’t work either.

I’m pretty sure I have put everything where it goes and have my link right, but it doesn’t seem to load from the .js file. Do you know if WordPress won’t allow that or that I just must be doing something wrong?

What’s your URL, and what’s something on the page you want to toggle?

(edit: I’m about to shut down for the night, so unless you reply in the next couple minutes or two, you won’t hear from me until tomorrow.)

I don’t know why the script you’re trying won’t work without seeing your site. But here’s one more way to do it. Lest I attract bots to my test site, I’ll say it this way. Go to my site:

https://adambrown.info

And paste this to the end of the URL:

/b/betablog/2007/11/15/showhide-demo/

If you look at the source, you’ll see I’ve got this:

<p id="toggleMe">Look, I'm a fascinating bit of text...</p>

And later on, this:

<script type="text/javascript">
var toggleMe = document.getElementById('toggleMe');
var toggleContent = '<span onclick="toggleIt();" class="toggleLink">Click to hide</span><br />'+toggleMe.innerHTML;
var toggleMsg = '<span onclick="toggleIt();" class="toggleLink">Click to read more</span>';
function toggleIt(){
	if (toggleMe.innerHTML!=toggleMsg)
		toggleMe.innerHTML = toggleMsg;
	else
		toggleMe.innerHTML = toggleContent;
}
toggleIt();
</script>

The script finds id “toggleMe” and replaces it with a “click to read more” text. (You could obviously change the script to look for a different ID.) This method doesn’t require you to edit the widgets you want to toggle, as long as the part you want to toggle has an ID around it. Just paste the script in your footer.php or something. It’s not glamorous, but it does the job if you can’t get that other script to work.

Hmm.. couldn’t get that to work either. Loads as it would, as if Javascript wasn’t active. Tried it in IE and Firefox, made sure JS was on too.

So, it must be my method of adding the code.

To add it, I went to manage page -> edit -> code view, and pasted it in. Would that be in error? Maybe the script on the other page doesn’t work for that reason too?

Hmm.. just tried pasting the code in through phpmyadmin, didn’t work either. Oh and I don’t actually have a live website I could show, I’m building the website by test driving on my desktop. That wouldn’t cause problems, would it? Everything else has worked up till now.

And thank you for all the time you are giving to me. ??

You can’t insert script into a page via either method you’re talking about. If you want to insert script, you need to put it directly into your template files (probably in footer.php, right before </body> and upload via FTP.

Maybe my example confused you on this point. The reason I was able to insert script the way I did is that I’ve hacked my theme to allow me to insert raw HTML (including script) via a post/page’s “custom tags.” But that’s not going to work for other themes.

OOohhh… okay. No wonder I couldn’t get anything to work. I should have just asked that first then. ??

So the code you posted, I would need to put it in one of the template files to make it work, to restate what you said?

Okay, got it working.

I only need one page to have the hide/show, fortunately, because I couldn’t for the life of me get wordpress to load a file with the code on it.

But what I did was take the links page template I am not using, cleaned out all the code that loaded stuff on to the page (besides the sidebar, header, and footer) and then pasted the hide/show code right in there, from the website I showed the link to. I then made a new page, using that as the template and the show/find works!

So, thank you for your time and help. Got it working now. ??