title: How to Add HTML & Javascript to Wordpress Shortcode?
body: <p>I have a snippet of HTML that I would like to make into a Wordpress shortcode. This is the snippet.</p>
  
  <pre><code>&lt;div class="small-12 large-7 columns"&gt;
  &lt;article id="text-39" class="panel widget widget_text"&gt;         
      &lt;div class="textwidget"&gt;
          &lt;div class="row"&gt;
              &lt;div class="h3 regular-font"&gt;Have Questions?&lt;/div&gt;
              &lt;div class="h5"&gt;TALK TO US 800.810.8412&lt;/div&gt;
              &lt;a href="http://www.oakwoodsys.com/email-us"&gt;&lt;div class="button help-email left"&gt;Email Us&lt;/div&gt;&lt;/a&gt;
              &lt;!-- BEGIN OLARK CHAT LINK --&gt;
              &lt;a href="javascript:void(0);" onclick="olark('api.box.expand')"&gt;&lt;div class="button help-chat left"&gt;Chat Now&lt;/div&gt;&lt;/a&gt;
              &lt;!-- END OLARK CHAT LINK --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've added this to my functions.php and it outputs the code properly when I add <code>[chat]</code> to a page in Wordpress. </p>
  
  <pre><code>// Chat/Email Shortcode
    function chat_shortcode() {
      return '&lt;div class="small-12 large-7 columns"&gt;
  &lt;article id="text-39" class="panel widget widget_text"&gt;         
      &lt;div class="textwidget"&gt;
          &lt;div class="row"&gt;
              &lt;div class="h3 regular-font"&gt;Have Questions?&lt;/div&gt;
              &lt;div class="h5"&gt;TALK TO US 800.810.8412&lt;/div&gt;
              &lt;a href="http://www.oakwoodsys.com/email-us"&gt;&lt;div class="button help-email left"&gt;Email Us&lt;/div&gt;&lt;/a&gt;
              &lt;!-- BEGIN OLARK CHAT LINK --&gt;
              &lt;a href="#"&gt;Chat Now&lt;/div&gt;&lt;/a&gt;
              &lt;!-- END OLARK CHAT LINK --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  &lt;/div&gt;';
      }
      add_shortcode('chat', 'chat_shortcode');
  </code></pre>
  
  <p><strong>However, when I change the live chat link from <code>#</code> to <code>javascript:void(0);" onclick="olark('api.box.expand')</code>, the entire site breaks. How can I make the link work properly?</strong></p>