Home | Uniquely NZ | Travel |
Web Site Design JavaScript for Hiding and Expanding Blocks of Text |
Readers of my Howto Technical Articles and my support pages for Small Firms will know that I try to avoid Java and Javascript as much as possible on web pages as the various browsers tend to be incompatible in their interpretation and some older browsers do not support it at all. Some users deliberately turn Java and Javascript off for security or to reduce intrusive adverts. Furthermore it reduces the chances of some Search Engines indexing the pages correctly, if at all. It is however very useful to be able to have popups and to be able to expand/hide blocks of text. Expanding and Hiding is useful in our case on pages where there is a 'How one did it Story' for concealing excessive details from dead ends and also on pages like the OU pages where the information for Tutors and Students may differ in emphasis. I therefore consider this is a valid use as it is difficult to do neatly and professionally without JavaScript and/or Cascading Style Sheets.
The following method is based on a method used on many professional web sites and has also been expounded in a number of threads on sites. In my version it involves three small JavaScript functions. It should work in all browsers that support the W3C DOM Core, JavaScript and Cascading Style Sheets (CSS 2.0 or higher). It includes a test to prevent any hang ups on browsers which do not support W3C DOM and should display the text if CSS is not supported.
The template I use for all my pages contains links to a standard JavaScript file called epopup.js (in the begining it just provided popups but now has lots of other functions hence the epopup.js, the responsive pages use rbox.js) and a standard Cascading Style Sheet CSS file called general.css (or responsive.css for the latest pages).. The JavaScript functions are added to epopup.js and the styles for the 'expander' and the expanded text are added to general.css. You could place them in the head instead- with suitable wrapping - or just create some new .css and .js files with just the code snippets below. The links to my standard files use the following code which is already in the head of almost every page using HTML 4.01:
<script src="epopup.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" href="general.css" type="text/css" >
The links are slightly different on my recent pages using HTML5:
<link rel="stylesheet" href="responsive.css">
<script src="rbox.js"></script>
The functions in epopup.js or rbox.js are:
/* Functions to expand and contract text in <div> blocks with an id */
function ExpandOn(topicID){
var expand=document.getElementById(topicID);
if(!expand)return true;
expand.style.display="block"
return true;
}
function ExpandOff(topicID){
var expand=document.getElementById(topicID);
if(!expand)return true;
expand.style.display="none"
return true;
}
function ExpandToggle(topicID){
var expand=document.getElementById(topicID);
if(!expand)return true;
if(expand.style.display=="none"){
expand.style.display="block"
} else {
expand.style.display="none"
}
return true;
}
And the two new style for the 'expander' and to identify the expanded topic which I have added to general.css or responsive.css are:
.expand {
color: #000099;
text-decoration: underline;
font-style: italic;
}
.expandedblock {
margin-left: 40px;
margin-right: 2%;
display: block;
padding: 10px;
background-color: #ffffff;
}
You need to insert the following into the HTML to obtain the 'link' and how to wrap the 'topic' you want to be able to expand [
]If you can not see the code you have not clicked the 'expander' above so try it out!
I have further developed the code for switching between two blocks of text instead of just hiding and expanding. This is used on Responsive pages and the following javascript code has been added to rbox.js
Its use includes changing the footers for Mobile versus Computer and for changing the size of Maps and Images as the pages are reduced in size.
/*
Function to allow one to switch between two two blocks for Responsive design.
if rlogic is true display the block within a tag with id of showId
otherwise display the block within a tag with id of hideId
this function MUST FOLLOW the two tag enclosed blocks
*/
function ResponsiveShowHide(rlogic,showId,hideId){
var expand1=document.getElementById(showId);
if(!expand1)return true;
if (rlogic) {
expand1.style.display="block"
} else {
expand1.style.display="none"
}
var expand2=document.getElementById(hideId);
if(!expand2)return true;
if (rlogic) {
expand2.style.display="none"
} else {
expand2.style.display="block"
}
return true;
}
Whilst it looks as if one does not need to set the initial style of the blocks it is advisable to set up the initial state in case the broser does not have javascript enebled - this at least prevents duplicate sets of text etc being displayed. It is usually sufficient just to set a 'hide' of one of the ids by a style="display:none;" in the tag. Also note that it is display:none; and display:block; I often forget and use display:hide which does not work!
Its use is described further in Mobile Friendly Responsive Web Site Design - it is used extensively in the way that my responsive design is implemented.