Read more / less code but it doesn’t change properly

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.

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";
  }
});

.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;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>

<div>
  <button class="toggle-text-button">Title</button>
  <div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
    <p>The text that is hidden.</p>
  </div>
</div>

<div>
  <button class="toggle-text-button">Title Two</button>
  <div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
    <p>The text that is hidden two.</p>
  </div>
</div>

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!

Answer

Variable status is “global”, it’s not unique for your toggle texts. There are various methods of doing this. The easiest is to check, if your .toggle-text class element is visible or not, and slide up/down accordingly.

$(document).on("click", ".toggle-text-button", function() {
  var toggleText = $(this).parent().children(".toggle-text");
  if (toggleText.is(':visible')) { // when toggleText is visible
    toggleText.slideUp();
  } else { // when it's not visible
    toggleText.slideDown();
  }
});

.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;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>

<div>
  <button class="toggle-text-button">Title</button>
  <div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
    <p>The text that is hidden.</p>
  </div>
</div>

<div>
  <button class="toggle-text-button">Title Two</button>
  <div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
    <p>The text that is hidden two.</p>
  </div>
</div>

Advertisement

Answer