Positioning hidden elements (to be opened on mouse gesture) relative to their links
Closing all opened elements with one click

Click on the red-colored links below to open some hidden elements. They will be closed one by one if the close buttons in the elemens are used. But they can also be closed simultaneously with one single click (except in Internet Explorer) if the target of the click is a point outside them.
 
Selecting a specific hidden element to be opened and positioning it relative to its anchor-link is determined by what we have after onclick in the link. If we have onclick="open_element('ID-of-hidden-element', 'rightbottom'), the element will be displayed under the link and to its right. If we have onclick="open_element('ID-of-hidden-element', 'leftbottom'), the element opens under the link and to its left. Similar remarks for onclick="open_element('ID-of-hidden-element', 'righttop') (above the element and to its right) and open_element('ID-of-hidden-element', 'lefttop') (above the element and to its left).
 
If there's not enough room for an element to be displayed to the right of a link, i.e. if the element is wider than the room left between the link and the right edge of the contents area of the page, the element will move to the left until there's enough room for it to be entirely visible. Similar remarks for cases where there's not enough room to the left: the element will move to the right.
 
Of course, none of this would be possible without specific code, so you are invited to view the (commented) JS, the CSS and the HTML in the source of the page.
 
 
Lorem Ipsum is simply dummy text Link 1
X

menu/content 1
default position:
to the right of the link; bottom position.
the dropdown will move to the left if there's not enough room to the right of the link.
dropdown opened with
onclick="open_element('ID-of-dropdown', 'rightbottom')"
of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker Link 2
X

menu/content 2
default position:
to the left of the link; bottom position.
the dropdown will move to the right if there's not enough room to the left of the link.
dropdown opened with
onclick="open_element('ID-of-dropdown', 'leftbottom')"
including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, Link 3
X

menu/content 3
default position:
to the right of the link; top position.
the dropdown will move to the left if there's not enough room to the right of the link.
dropdown opened with
onclick="open_element('ID-of-dropdown', 'righttop')"
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Link 4
X

menu/content 4
default position:
to the left of the link; top position.
the dropdown will move to the right if there's not enough room to the left of the link.
dropdown opened with
onclick="open_element('ID-of-dropdown', 'lefttop')"
Ipsum.