Hide text
There are several ways you can hide (and show) text.
This is just one way using CSS and JavaScript.
The section you want to hide is set between <DIV>...</DIV> (or between <SPAN>...</SPAN>).You need a link (to turn it on and off).<div id="divtitle" class="hidden"> Here comes the text you want to hide. It can also be a picture or a link </div>And the CSS-code.<a href="javascript:unhide('divtitle');">Show</a>And node the JavaScript code that makes it all tick:.hidden { display: none; } .unhidden { display: block; }The JavaScript-code can be set in the HTML-page or in a separated js-file.<script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if(item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script>The CSS-code can be replaced by the following, if you want to use visibility.
.hidden { visibility: hidden; } .unhidden { visibility: visible; }Here is a the hidden text of the example.
And an url Google.comThe difference between <DIV> and <SPAN>
is that <DIV>is like a paragraph, with space above and below it
And <SPAN> can be between text. (Among other things.)Overflow: hidden
Another option is using is overflow: hidden.
You set a height, 30px in this example, that you want this block to be shown
And everything that goes over it will be hidden.The CCS-code:
I gave it another class-name: hidden_overflow, but you can use the the same: hidden, or any other name..hidden_overflow { overflow: hidden; height: 30px; display: block; } .unhidden_overflow { display:block; }
Just also adapt you Javascript-code:And the <DIV> and Link-tag:function unhide2(divID) { var item = document.getElementById(divID); if(item) { item.className=(item.className=='hidden_overflow')?'unhidden_overflow':'hidden_overflow'; } }<a href="javascript:unhide2('example_overflow');">An Example of overflow</a> <div id="example_overflow" class="hidden_overflow">Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
Here is a the hidden text of the example.
And an url Google.com