Home Pauline Howto Articles Uniquely NZ Small Firms Search
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 [ Click to Expand and see my code to insert ]

The following is the code which was used to make the 'Expand Link' shown above

[ <span title="Click to expand this topic or to contract a topic which has already been expanded" class="expand" onClick="return ExpandToggle('topic1')">Click to Expand and see the code to insert</span>&nbsp;]

and then you wrap all the text that you want to expand with code as below

<div id="topic1" class="expandedblock" style="display:none">

  Almost anything you like - I have been cautious about nesting more <div>s but have seen no adverse effects

  You do however need to take care about having anchors within a hidden block of text as any links to it from, for example, an index will not work when it is hidden

</div>

 

In my implementation you also have a choice of a 'toggle' for the expansion or to make it permanent by using ExpandOn(topicID) instead of ExpandToggle(topicID) and you can also hide it by using ExpandOff(topicID).

Note: that each block (topic) which is being expanded MUST have a different id.

The class="expandedblock" has indented the text and changed the background so that the extent is clearly defined.

Tip: While developing a page it is best to use style="display:block" so the topic is always expanded so you can see what you are doing - you can still test as the 'expanders' will still toggle or change the state. At the end do a global replace.

Tip: You do not have to use a <span> tag for the 'expander' any tag which supports onclick can be used. You can put the onclick into a link to an anchor within a hidden block to expand it before you jump to it from, for example, a table of contents.

Tip:You also put it into a link to take you to the correct place when you contract a block from within itself but take care as these tricks may not be completely browser proof as they might depend on timing as well as support. The link should not have the same name as the 'id' otherwise it will not work Click here to Hide it again and return to the start

If you can not see the code you have not clicked the 'expander' above so try it out!

Show and Hide function

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.

Home Pauline Howto Articles Uniquely NZ Small Firms Search
Copyright © Peter and Pauline Curtis
Content revised: 27th September, 2015