10/05/2019
A couple people trying to learn to build web pages - asked me how to toggle an element to 'open' and 'close' using a button.
Easiest way, assuming reasonably modern browsers - is to add a 'default class' to the element you wish to toggle and then use a javascript function to 'toggle' between two classes.
NOTE: the 'trigger' is the onclick event and most page elements can support the onclick event, doesn't have to be a button, could be an image, or text or a header element like the element in the page body below.
NOTE: The button or other element with the onclick event does not have to be above or below the toggled element - the target element is identified / found in the 'document object model' by the id property. The trigger and toggled elements can be on the extreme opposite ends of the page - the code will still function the same way. You could modify this a bit and use the hover property to toggle the target element(s) when hover is active.
hideme {display: none;
}
showme {display: block;
}
function toggle() {
if( document.getElementById("mydiv").className == "hideme")
{
document.getElementById("mydiv").className = "showme";
} else {
document.getElementById("mydiv").className = "hideme";
}
}
This is some text to show up at the top of the page
OPEN ME
Whatever I place in this div - could be images, or an audio element or a video element, or a linked list or whatever, will only be visible when the class has been changed to 'showme' and if you click the button again, the div will again be invisible.
An excellent resource that I frequently use is W3schools.com
For a much more sophisticated example of what you can do with toggling of elements/objects - check out https://www.w3schools.com/howto/howto_js_hover_tabs.asp
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.
