Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 08-19-2008, 07:39 PM
  #1
roamer
Novice (Level 1)
 
Join Date: Aug 2008
Posts: 7
iTrader: (0)
roamer is an unknown quantity at this point
how do i hide and reveal text?

Hi guys.

I have a block of text on a html page. I want users to be able to click on 'more' at the end of the paragraph and this will reveal a few more paraghraphs. I have it working in safari with the following code:

HTML Code:
some text here.  
<a onclick="  hiddenTxt.style.visibility = 'visible';">More.</a>

<div id="hiddenTxt">the hidden text here</div>
In my css page i state the visibility as being hidden. The user then clicks more and the txt appears. As i say this works in safari but not firefox or windows. Any suggestions of where iv gone wrong or of a better way of doing this.

Many thanks.
roamer is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-19-2008, 07:58 PM
  #2
BonRouge
Winemaster
 
Join Date: Aug 2005
Location: Sendai, Japan
Posts: 3,125
iTrader: (0)
BonRouge has a spectacular aura aboutBonRouge has a spectacular aura about
You need that to be 'document.getElementById('hiddenTxt').' (and then the rest of it).

Here's another way to do it:
http://bonrouge.com/~togglit
BonRouge is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-19-2008, 08:12 PM
  #3
Pegasus
Mama Hen
 
Pegasus's Avatar
 
Join Date: Nov 2001
Location: 35 South of Santa Claus
Posts: 26,667
iTrader: (0)
Pegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud of
Here's another script that works nicely.
HTML Code:
<script type="text/javascript">
function toggle(obj) {
          var obj=document.getElementById(obj);
          if (obj.style.display == "block") obj.style.display = "none";
          else obj.style.display = "block";
}
</script>

<a href="javascript: void(0);" onClick="toggle('q1')">Question 1</a>
<div id="q1" style="display:none;">The answer</div>
Pegasus is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 06:03 AM
  #4
roamer
Novice (Level 1)
 
Join Date: Aug 2008
Posts: 7
iTrader: (0)
roamer is an unknown quantity at this point
Thanks for the speedy responses. Thanks pegasus, thats great works perfectly nice way of doing it..

Problem solved (wipes sweat from brow)

Many thanks all
roamer is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 06:09 AM
  #5
roamer
Novice (Level 1)
 
Join Date: Aug 2008
Posts: 7
iTrader: (0)
roamer is an unknown quantity at this point
Actualy, Pegasus

Im just wondering, could you use the same technique to change the colour of the text etc of a div tag?

many thanks.
roamer is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 06:45 AM
  #6
Pegasus
Mama Hen
 
Pegasus's Avatar
 
Join Date: Nov 2001
Location: 35 South of Santa Claus
Posts: 26,667
iTrader: (0)
Pegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud ofPegasus has much to be proud of
Changing the colour only requires CSS, not Javascript.

<style type="text/css">
.colorclass {color: #a1b2c3; }
</style>

That goes in the <head> tags, and your div would look like this:
<div id="q1" class="colorclass" style="display:none;">The answer</div>

Or you could add the display:none; to the colorclass CSS.
Pegasus is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 07:45 AM
  #7
rangana
"Resolved Advocate"
 
Join Date: Jan 2008
Location: Cebu City Philippines
Posts: 2,442
iTrader: (2)
rangana has a spectacular aura aboutrangana has a spectacular aura aboutrangana has a spectacular aura about
To dynamically change the text color, you might find this basic example useful:
Code:
<style type="text/css">
.red{color:#f00;}
.blue{color:#00f;}
</style>
<p onclick="this.className=(this.className!='red')?'red':'blue'">
Click me to change my color.
</p>
__________________
Learn how to program at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph!
rangana is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 08:30 AM
  #8
roamer
Novice (Level 1)
 
Join Date: Aug 2008
Posts: 7
iTrader: (0)
roamer is an unknown quantity at this point
Thanks guys,

Im ok changing the styles with css, i want to be able to do it on the press of a button.
i was hoping to use the java method to get round another problem iv been havin were i was changing txt colours using onclick. I had them working in safari i.e etc but not in firefox. Unfortunately if i try to use the method above to change the color of other text, in a div etc. Again it will work in safari etc but not firefox. any suggestions? I also want to avoid doing things like reloading the page focusing on a new css file.

Cheers for the help.
roamer is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 08:33 AM
  #9
rangana
"Resolved Advocate"
 
Join Date: Jan 2008
Location: Cebu City Philippines
Posts: 2,442
iTrader: (2)
rangana has a spectacular aura aboutrangana has a spectacular aura aboutrangana has a spectacular aura about
@roamer,

This is relatively unrelated to the original thread. Anyway, the code is working on FF at my end.

Could you provide a link, or better the codes you have the exhibit the problem
__________________
Learn how to program at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph!
rangana is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 08:38 AM
  #10
roamer
Novice (Level 1)
 
Join Date: Aug 2008
Posts: 7
iTrader: (0)
roamer is an unknown quantity at this point
lol, yip i realise that sorry... When i saw the java method pegasus was using i thought it may get round the conflict with firefox:

HTML Code:
<style type="text/css">
.red{color:#f00;}
.blue{color:#00f;}
</style>

<p onclick="somename.className=(somename.className!='red')?'red':'blue'">
Click me to change my color.
</p>
<div id="somename">hello</div>
if i do that it works in safari but not firefox...or am i refering to the div somename incorrectly?

cheers again for the help, its much appreciated.
roamer is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 08:53 AM
  #11
rangana
"Resolved Advocate"
 
Join Date: Jan 2008
Location: Cebu City Philippines
Posts: 2,442
iTrader: (2)
rangana has a spectacular aura aboutrangana has a spectacular aura aboutrangana has a spectacular aura about
roamer,

Your code is erroneous and invalid.
  • You cannot have the same ids in one page
  • Calling an element id is by using document.getElementById, so this part:
    Code:
    somename.className
    ..is erroneous and should be:
    Code:
    document.getElementById('somename')

You might find this modification useful:
HTML Code:
<style type="text/css">
.red{color:#f00;}
.blue{color:#00f;}
</style>

<p onclick="document.getElementById('somename').className=(document.getElementById('somename').className!='red')?'red':'blue';
document.getElementById('somename1').className=(document.getElementById('somename1').className!='red')?'red':'blue'
">
Click me to change my color.
</p>
<div id="somename">hello</div>
<div id="somename1">hello</div>
Hope it helps.
__________________
Learn how to program at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph!
rangana is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 09:08 AM
  #12
roamer
Novice (Level 1)
 
Join Date: Aug 2008
Posts: 7
iTrader: (0)
roamer is an unknown quantity at this point
cheers rangana,

you have been a great help. yeah wasnt surprised id done something wrong. I still have a long way to go on the road to html enlightenment .

thanks again for the help, its much appreciated.

Roamer
roamer is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 08-20-2008, 09:15 AM
  #13
rangana
"Resolved Advocate"
 
Join Date: Jan 2008
Location: Cebu City Philippines
Posts: 2,442
iTrader: (2)
rangana has a spectacular aura aboutrangana has a spectacular aura aboutrangana has a spectacular aura about
No problem. Glad I could help
__________________
Learn how to program at 02geek

The more you learn, the more you'll realize there's much more to learn
Ray.ph!
rangana is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 06:00 AM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.