Positioning elements-to-be-opened relative to their anchor links
(bottom-right, bottom-left, top-right, top-left)
Repositioning the elements if parts of them get cut off
Closing all opened elements with one click

JS and CSS HERE. If you don't want the translate() CSS function for the elements_to_be_opened, add transition: 0s!important to class closeable_from_outside, view source. See also this version of the script.

Lorem Ipsum is simply dummy text Link 1
X

Default: bottom right, but if there's not enough space to the right of the anchor, the element will move to the left.
HTML for the anchor:
<a class="the_anchor" id="any_text_you_want_but_it_must_be_unique" href="javascript: void(0)" onclick="open_element('subcontent', 'bottom_right', this.id); return false">Link 1</a>.
The first argument of the function (in red) corresponds to the ID of the element_to_be_opened.
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

Default: bottom left, but if there's not enough space to the left of the anchor, the element will move to the right.
HTML for the anchor:
<a class="the_anchor" id="any_text_you_want_but_it_must_be_unique" href="javascript: void(0)" onclick="open_element('subcontent2', 'bottom_left', this.id); return false">Link 2</a>.
The first argument of the function (in red) corresponds to the ID of the element_to_be_opened.
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

Default: top right, but if there's not enough space to the right of the anchor, the element will move to the left. And if there's not enough space above the anchor, the element will appear beneath it.
HTML for the anchor:
<a class="the_anchor" id="any_text_you_want_but_it_must_be_unique" href="javascript: void(0)" onclick="open_element('subcontent3', 'top_right', this.id); return false">Link 3</a>.
The first argument of the function (in red) corresponds to the ID of the element_to_be_opened.
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 Link 4
X

Default: top left, but if there's not enough space to the left of the anchor, the element will move to the right. And if there's not enough space above the anchor, the element will appear beneath it.
HTML for the anchor:
<a class="the_anchor" id="any_text_you_want_but_it_must_be_unique" href="javascript: void(0)" onclick="open_element('subcontent4', 'top_left', this.id); return false">Link 4</a>.
The first argument of the function (in red) corresponds to the ID of the element_to_be_opened.
Ipsum.