5 Replies - 13651 Views - Last Post: 14 November 2012 - 05:14 PM

#1 AlSer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 30-April 11

show/hide text with HTML, no css or java possible

Posted 30 April 2011 - 02:48 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: show/hide text with HTML, no css or java possible

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: show/hide text with HTML, no css or java possible

Posted 30 April 2011 - 04:19 AM

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...)
Was This Post Helpful? 1
  • +
  • -

#3 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: show/hide text with HTML, no css or java possible

Posted 30 April 2011 - 04:22 AM

I'm very sure that Wordpress allows you to use both CSS and JS.
Was This Post Helpful? 0
  • +
  • -

#4 AlSer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 30-April 11

Re: show/hide text with HTML, no css or java possible

Posted 30 April 2011 - 11:57 AM

View PostAtli, 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!
Was This Post Helpful? 0
  • +
  • -

#5 AlSer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 30-April 11

Re: show/hide text with HTML, no css or java possible

Posted 30 April 2011 - 12:06 PM

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.
Was This Post Helpful? 0
  • +
  • -

#6 gr8webdiva  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-November 12

Re: show/hide text with HTML, no css or java possible

Posted 14 November 2012 - 05:14 PM

View PostAlSer, 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1