title: Read more / less code but it doesn't change properly
body: <p>After doing some research I came to this code shown below. If you try the code yourself you notice the variable is used for every div with a button and text (the whole site). I tried several other codes but I like the slideDown/Up feature.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var status = "less"
  $(document).on("click", ".toggle-text-button", function() {
    if (status == "less") {
      $(this).parent().children(".toggle-text").slideDown();
      status = "more";
    } else if (status == "more") {
      $(this).parent().children(".toggle-text").slideUp();
      status = "less";
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toggle-text-button {
    background-color: #000000;
    color: yellow;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: 25%;
    text-align: middle;
    outline: none;
    font-size: 15px;
    font-family: verdana, geneva;
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"&gt;&lt;/script&gt;
  
  &lt;div&gt;
    &lt;button class="toggle-text-button"&gt;Title&lt;/button&gt;
    &lt;div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;"&gt;
      &lt;p&gt;The text that is hidden.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;button class="toggle-text-button"&gt;Title Two&lt;/button&gt;
    &lt;div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;"&gt;
      &lt;p&gt;The text that is hidden two.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If somebody knows how I can rearrange this code to make it work for every different div that would be fantastic.
  Thank you in advance!</p>