title: Is there a way to load a shortcode onclick event in javascript?
body: <p>I am trying to use a shortcode for a Masonry Gallery. I want to create 4 tabs. Once you click on tab #2, it should display a div and hide the others (which are already hidden by css). But when I click on tab #2, 3, or 4, the masonry gallery doesn't display until you click on a sort menu associated with the gallery. So Is there a way to add a simple function to this code so that I can load the shortcode upon click?</p>
  
  <p>All I am doing with the tabs in the html is calling the function on click event. 
  Sample Html:  onClick="displayClothing()" </p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function displayClothing() {
  document.getElementById("tab-1").style.display = "block";
  document.getElementById("tab-2").style.display = "none";
  document.getElementById("tab-3").style.display = "none";
  document.getElementById("tab-4").style.display = "none";
  document.getElementById("grid-fx1") {
      //Load gridfx id #1 shortcode  by calling script
   }
  }
  function displayPocket() {
  document.getElementById("tab-2").style.display = "block";
  document.getElementById("tab-1").style.display = "none";
  document.getElementById("tab-3").style.display = "none";
  document.getElementById("tab-4").style.display = "none";
  document.getElementById("grid-fx2") {
      //Load gridfx id #2 shortcode  by calling script
   }
  }
  function display287art() {
  document.getElementById("tab-3").style.display = "block";
  document.getElementById("tab-1").style.display = "none";
  document.getElementById("tab-2").style.display = "none";
  document.getElementById("tab-4").style.display = "none";
  document.getElementById("grid-fx3") {
      //Load gridfx id #3 shortcode by calling script
   }
  }   
  function display350art() {
  document.getElementById("tab-4").style.display = "block";
  document.getElementById("tab-1").style.display = "none";
  document.getElementById("tab-2").style.display = "none";
  document.getElementById("tab-3").style.display = "none";
  document.getElementById("grid-fx4") {
      //Load gridfx id #4 shortcode by calling script
   }
  }   
  </code></pre>
  
  <p>AND WHAT I WANT TO DO IS LOAD THIS BUT THERE WILL BE 4 DIFFERENT SHORTCODES IN DIFFERENT DIV'S:</p>
  
  <pre><code> [gridfx theme="light" posttypes="product"  show_title="1" columns=6 integrate="woocommerce" item_custom_field="woocommerce" single_item_custom_field"=woocommerce" excerpt_over_image="30" sortmenu="1"]
  </code></pre>