CODEWITHSUNDEEP
javascriptwordpressonclickshortcode
Yari Bernardus
Yari Bernardus

Reputation: 31

button onclick opening a wordpress shortcode

Im trying to make a button opening a shortcode from the ultimate shortcode plugin. Here is my example:

<button id="showInfo" onclick="showInfo()">Video</button>

javascript:

var infoSC = '[su_lightbox_content id="showInfo"]Inline content[/su_lightbox_content]';

function showInfoSC(){
  return infoSC;
}

I want to open a ligtbox based on the content of a post (advanced custom fields)

<?php the_field('info'); ?>

How can I get this to work?

Upvotes: 0

Views: 10636

Answers (1)

shamsup
shamsup

Reputation: 2032

You should be able to utilize the do_shortcode() function in wordpress to get the actual output that a shortcode will return.

do_shortcode('[su_lightbox_content id="showInfo"]Inline content[/su_lightbox_content]');

This will return the string of whatever the shortcode outputs. Keep in mind that javascript will break using a multi-line string, so be mindful of the html code that the shortcode will output if you plan to store it in a string in javascript.

My recommendation would be to have whatever that shortcode shows hidden via CSS, then utilize javascript to make the content visible.

For example, say the shortcode outputs 

<div class="su_lightbox_content" id="showInfo">
  Inline content
</div>

In your CSS, just add

#showInfo {
  display: none;
}

And your javascript function:

function showInfo() {
  document.getElementById("showInfo").style.display = "block";
}

This way, you can include the shortcode in the post/page normally and avoid any complications with using javascript to create a new element from a raw html string.

Upvotes: 1

Related Questions