RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.74% (6.40%*) • Investment PI: 5.49% (6.32%*)

How to Use the Details Tag WordPress Shortcode

The HTML <details> tag is a lesser-used HTML tags which often negates the need to use fancy-pants JavaScript to return 'hidden' content. Our shortcode that references this tags is a ridiculously minor feature, but since it utilises the Blocks Module it was worthy of inclusion. Many businesses have found use for the feature. Your website includes hundreds of shortcodes - most of which we'll try and document.

  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
This is the text returned when the details block is selected. This text may be formatted in any manner of your choosing, and it may include shortcode content.

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
This text will show when a user moves their mouse over the details panel. Shostrcode is also supported - in this case we're showing a YouTube video with the relevant shortcode.

The container isn't entirely suitable for video, but any content will work.

  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:

Example Block Content

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.

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.

  Shortcode Attributes

Standard shortcode attributes are as follows:


The title of the panel (summary) - title="Your Title in Here".


To render the details panel open by default, use open="1".


Title CSS is applied to the summary (title) section. As per our example above, use title_css="font-weight: normal; border: none; (the CSS is applied inline).


The CSS applied to the reveal text. The CSS is applied inline and simply overrides the default CSS. For example: text_css="line-height: 1.0; color: #000000;".


If you wish to open the details panel on mouseover use mouseover="1".

By default the feature will render as per the first example.

■ ■ ■

  Related Content Block FAQs

FAQs relating to use of Content Blocks.

In a previous FAQ we introduced to the the 'BM Box'. The 'BM Box' is a navigation and panel element that provides information in a format that was deliberately designed to emulate the general presentation of the Lender Widgets on your website. The BM Box is created in Yabber or Elementor, and a number of… [ Learn More ]

The Conditional Content Blocks arguably the more effective method of rendering blocks of conditional content. The 'Blocks' module introduced similar functionality to what we're about to described, but if you're starting with Conditional Content, we'd suggest you use this module rather than Blocks simply because of the ease a single page may be assigned… [ Learn More ]

Conditional Content is one of the defining features of your website framework. Despite the fact the Conditional Content blocks are often avoided because of the perceived complexity, they seriously amplify the effectiveness of any organic or promoted funnel. We appreciate that many brokers just 'want a website', and that's find, but if and when the… [ Learn More ]

The BM Box is simply a small element used for the purpose of navigation or information blocks. It is one of two primary blocks we've built, with the second being the BM Panel. The Panel is far more robust and is pending migration into the standard framework. To 'Services' page, accessible from the primary menu… [ Learn More ]

In this FAQ we introduce the very basic 'Reveal' (or 'Blind') shortcode and Elementor widget. Hidden content is revealed after a 'link' is clicked. It's a very simple but highly effective tool. The 'Reveal' tool requires familiarity with the Blocks Module as it is block content that is returned in the blind.


Blocks are simply blocks of content of any type that may be recycled in multiple locations on your website. When they require an update, a single block only needs to be updated in Yabber to globally alter all occurrences of that block on your website. Block content is easy to create, easy to modify, and… [ Learn More ]

Resulting from various State-level Government incentives and fees, one of the areas that differs significantly from state-to-state is the purchase of a first home. The FHB Panel is one of the simplest conditional features of any type to use because it serves content that is resolved by State - not interest, which is the typical… [ Learn More ]

Your website includes a large number of tools to group related content into an accordion-style panel - the Post Accordion is just another one of them. The feature is supported by shortcode and an Elementor block, and the style/presentation is managed in Yabber. This FAQ will show you how to use the tool. An example… [ Learn More ]

Scrollable is a content tool we've introduced as part of our 'Blocks' module, and downline to Yabber's parent Contentus module. 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… [ Learn More ]

The HTML <details> tag is a lesser-used HTML tags which often negates the need to use fancy-pants JavaScript to return 'hidden' content. Our shortcode that references this tags is a ridiculously minor feature, but since it utilises the Blocks Module it was worthy of inclusion. Many businesses have found use for the feature. Your… [ Learn More ]

  Related FAQs

Share this FAQ

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest