RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts</strong | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.69% (5.89%*) • Home Loan Fixed: 5.39% (5.84%*) • Fixed: 5.39% (5.84%*) • Variable: 5.69% (5.89%*) • Investment IO: 5.69% (6.19%*) • Investment PI: 5.55% (6.02%*)

A Simple Sliding Blind for WordPress with Shortcode or an Elementor Block

A Simple Sliding Blind for WordPress with Shortcode or an Elementor Block

Some time back we shared a small snipped that would create a show or hide a content blind in WordPress. Unfortunately, it sucked. I still remember writing the code as a quick solution to a client request bouncing around in the back of car during a layover in Los Angeles... and this was in the days when all I had was my trusty Nokia E72. The code on this page isn't necessarily much better but it does negate the need for scoped CSS, and with the exception of a scrolling delay that 'animates' the content blind it's not entirely different to the original. I'm sharing this code here rather than our Codex only because it was necessary for an article published a few days ago, and it replaces the shonky previous version.

A feature not totally unlike what is shown below is included in our client plugin as a calendar display option; in many cases a client won't want to render a standalone calendar on a page (which is a one-click feature provided by default) in Yabber Tag: yabber, but showing a calendar by way of 'Make a Booking' text may be useful.

The result is rather pedestrian, but still very nice on the page.

While editing CSS inline upsets many, there's an option for cases when you want to include styling to the returned DIV; in this case we've also provided an unrealistic toggle delay of 2 seconds. For example.

Shortcode Usage

To return a basic blind, and not unlike our previous shortcode, simply use as follows: [blind title="Title in here"]Your Content in here...[/blind].

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

1
<?php 
2
/*
3
 A Simple Sliding Blind for WordPress with Shortcode or Elementor Block
4
 https://www.beliefmedia.com.au/?p=26333&preview=true
5
*/
6
 
7
function beliefmedia_rolling_blind($atts, $content = null) {
8
 
9
 /* Shortcode Atts */
10
 $atts = shortcode_atts(array('text' => 'Show content', 'delay' => '350', 'id' => false, 'show' => false, 'style' => ''), $atts);
11
 
12
 /* If no ID, https://developer.wordpress.org/reference/functions/wp_rand/ */
13
 $id = ($atts['id'] === false) ? wp_rand( $min = 0, $max = 10000 ) : $atts['id'];
14
 
15
 $r = '<script>
16
  jQuery(document).ready(function() {
17
   jQuery(\'#blind_' . $id . '\').click(function() {
18
    jQuery(\'#blind_roll_' . $id . '\').toggle(' . $atts['delay'] . ');
19
   });
20
 });</script>';
21
 
22
 /* Hide Content on page load? */
23
 $style = ($atts['show'] === false) ? 'display: none;' . $atts['style'] : $atts['style'];
24
 
25
 $r .= '<div id="blind_' . $id . '" style="all: revert;"><a href="#" onclick="return false;">' . $atts['text'] . '</a></div>';
26
 $r .= '<div id="blind_roll_' . $id . '" style="all: revert;' . $style . '"><p style="margin-top: 20px;">' . do_shortcode($content) . '</div>';
27
 $r .= '<div style="margin-top: 20px;"></div>';
28
 
29
 /* Remove breaks - avoids wpautop errors */
30
 $rs = trim(preg_replace('/\s+/', ' ', $r));
31
 
32
 return $rs;
33
}
34
add_shortcode('blind', 'beliefmedia_rolling_blind');

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.

Shortcode Attributes

The following shortcode attributes are available.

text

The title text in the link that exposes the content.

delay

The delay in milliseconds for the blind to render. Use as follows: delay="2000".

show

Should the content be shown by default? If so, use show="1".

style

If a style is to be applied, enter it in full. For example, style="border-left: 1px solid #000000; padding-left: 30px;".

Considerations

The code isn't ideal, but it's short and easy to use. If you're a client and logged into our client portal you'll have access to a standalone Elementor block. However, the feature is now included in our BeliefMedia plugin by default.

Download


Title: Show Content in WordPress in a Rolling Blind with Shortcode
Description: Clicking on a text link will show or hide a block of text on your WordPress page. Various options apply.
  Download • Version 0.1, 861.0B, zip, Category: WordPress Shortcodes

■ ■ ■

 
Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.
Finance Guide, Cropped Top and Bottom
  Timezone: 1 · [ CHANGE ]

RELATED READING

Like this article?

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

Leave a comment