Home / design

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>). 

<div id="divtitle" class="hidden">
Here comes the text you want to hide.
It can also be a picture or a link
</div>
You need a link (to turn it on and off). 
<a href="javascript:unhide('divtitle');">Show</a>
And the CSS-code. 
.hidden { display: none; }
.unhidden { display: block; }
And node the JavaScript code that makes it all tick: 
<script type="text/javascript">
function unhide(divID)
{
 var item = document.getElementById(divID);
 if(item)
 {
  item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
}
</script>
The JavaScript-code can be set in the HTML-page or in a separated js-file.

The CSS-code can be replaced by the following, if you want to use visibility. 

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

An Example

 

The 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: 

.hidden_overflow { overflow: hidden; height: 30px; display: block; }
.unhidden_overflow { display:block; }
I gave it another class-name: hidden_overflow, but you can use the the same: hidden, or any other name.
Just also adapt you Javascript-code: 
function unhide2(divID)
{
 var item = document.getElementById(divID);
 if(item)
 {
  item.className=(item.className=='hidden_overflow')?'unhidden_overflow':'hidden_overflow';
 }
}
And the <DIV> and Link-tag: 
<a href="javascript:unhide2('example_overflow');">An Example of overflow</a>
<div id="example_overflow" class="hidden_overflow">

An Example of 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

 

TOP