Click to reveal text

[tmcdonnell]

Hi all,

 

I would like a button/text link to open a text paragraph when it is clicked.

 

Example:

 

 

Click to read

 

 

If they click it becomes:

 

 

 

Thank you for clicking the icon.

 

 

To recap the text is hidden untill the user clicks a link or button.

 

How would I go about coding this?

 

Thanks in advance.

 

 

 

[p2grace]

Two ways, ajax or javascript. 

 

Javascript example:

 

<div id="swapdiv">
   Click to read.
</div>

<script type='text/javascript'>
var opened = false;

if(opened == false){
    document.getElementById('swapdiv').innerHTML = 'Thank you for clicking this icon.';
    opened = true;
}else{
    document.getElementById('swapdiv').innerHTML = 'Click to read';
    opened = false;
}
</script>

 

Something simple like that should work.

[Psycho]

Unless you are dealing with a LOT of text, AJAX would be overkill (and the delay would make it a poor choice as well). This is really a javascript/css issue, so this is in the wrong forum. But here is a down-and-dirty working example:

 

<script type="text/javascript">

function displayPara(fieldID, displayBol) {

  var paraObj = document.getElementById(fieldID);
  var showObj = document.getElementById(fieldID+'_show');
  var hideObj = document.getElementById(fieldID+'_hide');

  paraObj.style.display = (displayBol)? '' : 'none' ;
  showObj.style.display = (!displayBol)? '' : 'none' ;
  hideObj.style.display = (displayBol)? '' : 'none' ;

}

</script>

<a href="#" onclick="displayPara('para1', false);" id="para1_hide" style="display:none;">Hide Text</a>
<a href="#" onclick="displayPara('para1', true);" id="para1_show" style="">Show Text</a>
<div id="para1" style="display:none;">The text you want to hide/display will go here</div>

[tmcdonnell]

Perfect - Thank You

[bryan52803]

In my opinion, size shouldn't be the limitation with AJAX; it should be a matter if the content is dynamic or not.

 

If you're looking to reveal changing, dynamic content, use AJAX.

 

If the text revealed is static and unchanging, use pure javascript.

 

Bryan

[Psycho]

In my opinion, size shouldn't be the limitation with AJAX; it should be a matter if the content is dynamic or not.

 

If you're looking to reveal changing, dynamic content, use AJAX.

 

If the text revealed is static and unchanging, use pure javascript.

 

Bryan

 

Well, I would partially agree. Although some people would consider "dynamically" displaying a paragraph as "dynamic" content, I do not. There is an important distinction there. True dynamic content (in my opinion) is content that you can't predetermine before the user clicks some particular action - such as paginated records or an IM tool.

 

With the user's request above I am assuming it is static text that will just be changing display property (if the text changed each time he expanded it then that would be dynamic). In those situation I typically support handling it all in the in-line JavaScript code.

 

However, no matter what your girlfriend says, size does matter. Even though many people have broadband connections - not all do. And even so, reducing bandwidth is somethign to pay attention to. If you have many different expandable sections with a lot of text, then it could be advantageous to dynamically load the content. There is no one rule fits all - each situation is different.