HD-DivHidden module for Joomla 1.5
|
A module to conceal and reveal text, images and HTML with Javascript.
|
 |
|
what is this? | what to do after installing? | what's the point? | adding a reveal/conceal toggle button | using multiple modules on same page
What is this?
HD-DivHidden is a small module that enables you to conceal text, images and HTML which can then be revealed with a simple javascript hyperlink.
What to do after installing?
Install the zip file via the administration install manager as per any other module. Once it has installed go to the module manager and select HD-DivHidden. Enable the module, select the module position, give it an identifier name (or use the default one if unsure), enter the HTML in the content box, then select whether you wish the content to be hidden on page load or displayed.
What's the point?
This extension was developed to help "tidy up" a website where excessive text was complicating the user experience. A toggle button enabled users to reveal specific content which would otherwise bog the site down.
As the content is hidden by Javascript it can still be crawled by search engines.
The module can also be used as an image pre-loader to ensure that specific images are loaded in a particular order, increasing image loading speeds.
How to add a reveal/conceal toggle button.
The toggle button is a hyperlink that calls a Javascript function. Creating a toggle button is the same as creating a hyperlink but instead of a destination URL the link should be aimed at javascript:divHidden(); (replacing divHidden with your identifier if a different one is used).
Using multiple modules on the same page.
If you want to display more than one HD-DivHidden module on the same page you must make sure each module has a unique identifier.
To do this simply change the identifier title which by default is named "divHidden". The new identifier will be used as the CSS id as well as the title of the Javascript function which is called to conceal and reveal the content. You will also need to ensure your toggle button refers...
eg. if your identifier is hello then instead of the toggle button link being javascript:divHidden(); it should now be javascript:hello();