You have the ability to use embed tags within any WYSIWYG block to hide detailed information behind a More link. If the user clicks the More link, then the additional content will be shown (unhidden), the More link will be hidden, and a Less link will be provided at the end of the additional content. If the Less link is clicked then the additional content will be hidden and the More link will be available again.
You may have many of these More/Less tags within a WYSIWYG block, but they must be used in pairs. The More tag marks the beginning of the additional content, and the Less tag marks the end of the additional content. It is also the location for the More/Less links that get auto-generated by these tags.
You may customize the More link text (default "[More]") and the Less link text (Default "[Less]") and you can add optional CSS class(es) to either or both tags for styling purposes.
Each pair of More/Less tags must be given a unique name. The same unique name must be used for both the More and Less tags so they will be treated as a pair. The next pair will need a different unique name. e.g. "section_1" or "section_2" or "extra_stuff" or "size_chart".
{{bongo4u=show_more|name=section_1|...}}
{{bongo4u=show_less|name=section_1|...}}
Example 1 (simple, using defaults)
Want to know more? {{bongo4u=show_more|name=section_1}}
Here are the additional details... blah... blah... blah... {{bongo4u=show_less|name=section_1}}
Example 2 (add CSS class, custom link text)
Want to know more?
{{bongo4u=show_more|name=section_2|class=b4u_show_more_tags|link_text=Yes, More...}}
Here are the additional details... blah... blah... blah...
Here are the additional details... blah... blah... blah...
Here are the additional details... blah... blah... blah...
Here are the additional details... blah... blah... blah...
{{bongo4u=show_less|name=section_2|class=b4u_show_less_tags|link_text=...Show Less}}
Want to know more?
{{bongo4u=show_more|name=lumber_size_chart|class=b4u_show_more_tags|link_text=Lumber Size Chart}}
Very long chart goes here...
Very long chart goes here...
Very long chart goes here...
Very long chart goes here...
{{bongo4u=show_less|name=lumber_size_chart|class=b4u_show_less_tags|link_text=Hide Chart|scroll_back=y}}
Tag Field Details
Mandatory fields: name
Optional fields for show_more: class, link_text
Optional fields for show_less: class, link_text, scroll_back, scroll_back_offset
The fields can be coded in any order.
Default text for link_text in show_more is "[More]" and in show_less is "[Less]" if either is not specified.
The
value for name=value can be anything using letters, numbers or
underlines. You must use the SAME name=value for a given pair of show_more and show_less tags.
The
value for name=value is appended to the end of "b4u_show_more_area_" to create
what should be a unique CSS ID name for this section of content to be
hidden/shown when the more/less links are clicked. For example, name=size_chart would generate the following CSS IDs within the resulting code:
- b4u_show_more_area_size_chart_more
- b4u_show_more_area_size_chart_content
- b4u_show_more_area_size_chart_less
scroll_back=y enables a scroll back animation when the Less link is clicked. This is useful if the additional content between the More and Less tags consumes significant vertical space such as when the More and Less tags cannot both be seen without scrolling up/down. scroll_back=n is supported for consistency but doesn't do anything.
e.g.: ....|scroll_back=y
scroll_back_offset
is optional, must begin with "-" or "+" and be immediately followed by a
number of pixels for vertical offset from the top of the browser view.
This parameter is useful if the top of the browser view is overlaid by
other content such as sticky navigation. A "-NNN" (negative number) will
position the More tag below the top of the browser view (typical use), whereas a "+NNN" will position the More tag above the top of the browser view (out of sight). This parameter is ignored unless scroll_back=y is also specified.
e.g.: ....|scroll_back=y|scroll_back_offset=-150