Blog, Elementor, JavaScript, WordPress, WordPress Shortcode

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 , 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.

Click Me For Some Content

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.

Click Me and Show a Basic Styling Option

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.

<?php

A Simple Sliding Blind for WordPress with Shortcode or Elementor Block

https://www.beliefmedia.com.au/?p=26333&preview=true

function beliefmedia_rolling_blind($atts, $content = null) {

/* Shortcode Atts */

$atts = shortcode_atts(array('text' => 'Show content', 'delay' => '350', 'id' => false, 'show' => false, 'style' => ''), $atts);

/* If no ID, https://developer.wordpress.org/reference/functions/wp_rand/ */

$id = ($atts['id'] === false) ? wp_rand( $min = 0, $max = 10000 ) : $atts['id'];

$r = '<script>

jQuery(document).ready(function() {

jQuery(\'#blind_' . $id . '\').click(function() {

jQuery(\'#blind_roll_' . $id . '\').toggle(' . $atts['delay'] . ');

});

});</script>';

/* Hide Content on page load? */

$style = ($atts['show'] === false) ? 'display: none;' . $atts['style'] : $atts['style'];

$r .= '<div id="blind_' . $id . '" style="all: revert;"><a href="#" onclick="return false;">' . $atts['text'] . '</a></div>';

$r .= '<div id="blind_roll_' . $id . '" style="all: revert;' . $style . '"><p style="margin-top: 20px;">' . do_shortcode($content) . '</div>';

$r .= '<div style="margin-top: 20px;"></div>';

/* Remove breaks - avoids wpautop errors */

$rs = trim(preg_replace('/\s+/', ' ', $r));

return $rs;

}

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 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.