Hide or expand sections on an HTML web page

View the source code of this page to see how the process has been applied directly to paragraphs, to div or span sections or to tables.

The following code is required to make the buttons functional:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

The buttons have a code such as

<input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2">
<p>Use HTML and ...

This is a normal paragraph. Click on the following button to toggle the display of the next paragraph.


Use HTML and javascript instructions to control whether this section is hidden or visible. A short javascript program is contained within the body of this page and called using the toggle buttons.



An Access database is available from MeadInKent.co.uk which will generate a web page from data held in a query or table. The HTML code will include toggle buttons to hide or display sections of the table. This gives the user the option of drilling down into detail within the table.




Create a table with hidden sections

Level 1 Division Planned Care

Page name -  © www.MeadInKent.co.uk 2012