The HTML <details> tag is a lesser-used HTML tags which often negates the need to use fancy-pants JavaScript to return 'hidden' content. The website we provide mortgage brokers is packed with shortcodes and Elementor widgets that makes the creation of dynamic website content easy, and despite providing a number of shortcodes for fancy content reveals, the details tag is easy to use and every bit as functional as fancy alternatives. This article provides a basic introduction to the shortcode, and we provide a download of the necessary code for those that wish to implement the feature themselves.
Mozilla standards defines the details tag 
as one that ...creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element
.
The Result
The basic result is returned via the shortcode of [bm_details title="Title"]My Text[/bm_details]. The result:
This is a Details Title
In the second example we'll use a mouseover feature to show the blind when you move your cursor over the details text. We'll also apply some inline CSS with the attribute of title_css="font-weight: normal; border: none;. The result:
This is Mouseover Title Text
It's obviously not entirely suitable for video as it requires the user maintain their cursor over the panel while they're watching (we're pretty sure we can listen for the YouTube event and keep the panel open - we just haven't figured it out yet).
The HTML
As per specifications, you can create the summary section with naked HTML. Use the following CSS and HTML.
The following HTML returns the result:
To open the summary panel by default, use <details open> To apply a custom 'button', use the following CSS (in this case we're using a Font Awesome chevron):
The Shortcode
The shortcode function should generally be applied in WordPress simply because it enables you to globally alter functionality and style in the future without having to edit every occurrence of the tag.
Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.
If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.
CSS will be required in your custom function's CSS file as follows:
In the downloadable version we've wrapped the result in paragraph tags.
Shortcode Attributes
Standard shortcode attributes are as follows:
title
title="Your Title in Here".open
open="1".title_css
title_css="font-weight: normal; border: none; (the CSS is applied inline).text_css
text_css="line-height: 1.0; color: #000000;".mouseover
mouseover="1".By default the feature will render as per the first example.
Yabber Blocks Integration
Clients may render content by referencing a Yabber block. To do so, reference the numeric block value in your shortcode between the [bm_details]. For example, [bm_details title="Example Block Content"]63624[/bm_details] (in this case we've referenced entirely irrelevant content relating to Scrollable). The result:
This is an example of a Scrollable window. In this particular example we've used a smaller font size and line height but in most cases the font will default to that used on your page. We've also applied a border and a redirect checkbox (it redirects back to this page but the expectation is that you'll redirect to a new page or form). All elements of this Scrollable window are customisable, and not unlike any other Block element, media and shortcodes may be applied. Scrollable was introduced for a number of reasons. First and foremost it's just a funky tool that's available to you, but it was also a compliance consideration. In talks with a group quite recently they indicated that they were obligated to provide an entry disclaimer whenever an online application was commenced. The Scrollable window may be dragged into any position of your page with our Elementor block or via the use of shortcode. The scroll handle and background may also be customised.Example Block Content
There are other Yabber content tools, such as a facility to return specific lender data, products, and information, meaning that your blind content will always be up-to-date.
Conclusion
The details shortcode is just another way in which to render content or Yabber blocks. The reality is that you'll pick one specific way in which to return content and then generally stick with it.
A significant reason for inclusion of this feature is that we can return content in the manner described by way of our article program. Our Yabber and partner plugin supports a range of tools to make 'generic' articles more dynamic, and the details shortcode provides us with more options.
For more information on various content features or Block options, consider the articles below.
Given that website and business content is ridiculously important, and since very few brokers assign the necessary time to improve upon their digital footprint, we decided to improve upon Yabber's content modules with a program we're calling . The Contentus module is a parent module that'll support our existing suite of tools that'll allow you .. [ Learn More ]
Scrollable is a content tool we've introduced as part of our '' module, and downline to Yabber's parent . Scrollable simply allows you to include blocks of content in a scrollable window for those cases where you choose to contain large amounts of text in a smaller contained area. An option to render a checkbox .. [ Learn More ]
In a previous article we introduced Yabber's ' module, and how the system is used as part of your simplified content creation strategy. If you're unfamiliar with the Block concept, and in brief, they're simply a block of content that is created on Yabber and then referenced anywhere on your website. Changes made to the .. [ Learn More ]
Download
Download the shortcode and CSS below. If you're not a client, you should have our custom functions plugin installed.
One of nine photos making up a panorama. View south east along George Street towards Central and Surry Hills, showing St Andrews Cathedral at bottom right, Belmore Park, the Benevolent Asylum, Devonshire Cemetery and the Exhibition Building in distance in Prince Alfred Park. Signs on buildings include Melbourne Boot Comp, Sydney Coach Building Company, Forrester, Condell Boots (Robert Condell, boot warehouse, 588 George Street), EF Flanagan (Edward Flanagan, stationery, book seller, 594 George Street), Kangaroo Hotel (Alexander Yeend, 471 George Street, site of Bank of NSW), TJ Brown, Engineer (99 Bathurst Street) & Lawlers (John Lawler, 517 George Street). In 1873, Sydney photographer Francis W. Robinson undertook a perilous ascent of the clock tower of Sydney Town Hall, then nearing completion as the tallest structure in Sydney. His images record the Sydney skyline of that time. [ View Image ]
