[AlSer]

Hello,

I am trying to create a wordpress.com site for a non-profit organization. They have a board members page where I would like to list the names and when a name is clicked, to reveal a short bio. There is a long list of board members and I do not want to make the page look too crowded. Wordpress doesn't allow for java or changing the css (free version).
Is there any way I can do this with only html?
Or do you have any other suggestion as to how this could work?
Thank you in advance,

Al.

[Atli]

No, you can't do this with HTML alone.

HTML only sets up the structure of the page, only including very basic styling tags. To properly style it you need CSS, and to make it interactive you need Javascript.

Even if you can't set up your own CSS documents, you can inline CSS styles into HTML elements. For instance, to hide an element, you can do this:

<div style="display: none;">Member bio....</div>

You can also inline Javascript code, although if you do that a lot it gets very hard to follow:

<div 
    onclick="document.getElementById('bio_1').style.display = document.getElementById('bio_1').style.display == 'none' ? 'block' : 'none';"
>
    <h1>Member name</h1>
    <div id="bio_1" style="display: none;">Member bio...</div>
</div>

A better way would be to use a <script> block to define a function to call.

P.S.
Java and Javascript are very very different things

P.P.S.
Are you sure WordPress doesn't allow you to create your own Javascript and CSS files? I've never used it before, but I was under the impression that it was a fairly well built system, and that it was free to use. (I can't believe a system like that would have become this popular with those sort of restrictions...)

[sas1ni69]

I'm very sure that Wordpress allows you to use both CSS and JS.

[AlSer]

Atli, on 30 April 2011 - 04:19 AM, said:

No, you can't do this with HTML alone.

P.S.
Java and Javascript are very very different things

P.P.S.
Are you sure WordPress doesn't allow you to create your own Javascript and CSS files? I've never used it before, but I was under the impression that it was a fairly well built system, and that it was free to use. (I can't believe a system like that would have become this popular with those sort of restrictions...)

Thank you very much for your reply! I will try your suggestions and see if it works. So far, whenever I pasted any kind of scripts, they were stripped away.
Sorry for misusing the terms :-)
There are basically two wordpress services: wordpress.com is free and the platform is online. wordpress.org is also free but you have to download a software and host your website somewhere. .org has a lot of extra plugins and options.
The problem is I have 0 budget. So I have to use .com and am limited to what it let's me do.

for a brief comparison between the two see here: http://en.support.wo...com/com-vs-org/
(they do let you modify the CSS but for an yearly fee which is a no-no...)

Thanks again!

[AlSer]

ok, so I pasted the javascript code you sent me, saved the page and then checked it. as expected, the script was stripped and now the html looks like this:

<div>
<h1>Member name</h1>
<div id="bio_1" style="display:none;">Member bio...</div>
</div>

all of this: onclick="document.getElementById('bio_1').style.display = document.getElementById('bio_1').style.display == 'none' ? 'block' : 'none';"
is gone.


uffff.

[gr8webdiva]

AlSer, on 30 April 2011 - 12:06 PM, said:

ok, so I pasted the javascript code you sent me, saved the page and then checked it. as expected, the script was stripped and now the html looks like this:

<div>
<h1>Member name</h1>
<div id="bio_1" style="display:none;">Member bio...</div>
</div>

all of this: onclick="document.getElementById('bio_1').style.display = document.getElementById('bio_1').style.display == 'none' ? 'block' : 'none';"
is gone.


uffff.

The problem is that you're trying to add "code" in the Visual window. If you want to embed javascript within a page/post in Wordpress, you HAVE to use the HTML view...and remember not to try to look at it in Visual.