title: Place a button and its div with one command
body: <p>Currently, I have a <code>button</code> class which lets me place a clickable button inside a sentence, and a <code>div</code> class which lets me add content to the button which I placed at the end of the paragraph containing the sentence.</p>
  
  <p>This is an example of how I use them</p>
  
  <pre><code>Try to click &lt;button class="col"&gt;THIS&lt;/button&gt; and see what happens.
  &lt;div class="con"&gt;nice!&lt;/div&gt;
  Did you try?
  </code></pre>
  
  <p>When this text is displayed on the page, the two sentences are placed inside two different paragraphs, so the <code>div</code> object is placed between them.</p>
  
  <p>Here is a snippet with the css classes and the javascript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>( function() {
      coll = document.getElementsByClassName("col");
      conn = document.getElementsByClassName("con");
      var i;
      for (i = 0; i &lt; coll.length; i++) {
          coll[i].setAttribute('data-id', 'con' + i);
          conn[i].setAttribute('id', 'con' + i);
          coll[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var content = document.getElementById(this.getAttribute('data-id'));
              if (content.style.maxHeight) {
                  content.style.maxHeight = null;
              } else {
                  content.style.maxHeight = content.scrollHeight + "px";
              }
          });
      }
  } )();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col {
    cursor: help;
    border-radius: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    font-size: 1em;
    color: red;
  }
  
  .con {
    padding: 0 1em;
    max-height: 0;
    overflow: hidden;
    transition: .3s ease;
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Try to click &lt;button class="col"&gt;THIS&lt;/button&gt; and see what happens.
  &lt;div class="con"&gt;nice!&lt;/div&gt;
  Did you try?</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wonder if it is possible to implement a shortcut to place the two objects with one command, that is to obtain the previous example by using something like this</p>
  
  <pre><code>Try to click [[THIS|nice!]] and see what happens.
  Did you try?
  </code></pre>
  
  <p>What I mean is that the command <code>[[THIS|nice!]]</code> should place the object <code>&lt;button class="col"&gt;THIS&lt;/button&gt;</code> in the same position and the object <code>&lt;div class="con"&gt;nice!&lt;/div&gt;</code> at the end of the paragraph containing the command.</p>
  
  <p>Is it possible to implement such a command (or a similar one)?</p>
  
  <h2>EDIT</h2>
  
  <p>I forgot to say that the content of the button, ie what is written inside the div, should also be possible to be a wordpress shortcode, which is a shortcut/macro for a longer piece of code or text.</p>