Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

why can't I use the same javascript toggle button twice?

byMR
February 9, 2022

I’m attempting to utilize this javascript toggle button in two separate parts on the same page, but I’m having trouble. I tried altering the id as well, but it didn’t work. Is it impossible to complete it, or am I overlooking something? I am not an expert in javascript and am a complete novice, so any help would be greatly appreciated.

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText   = document.querySelector("#moreButton span");
  var moreIcon     = document.querySelector("#moreButton img");

  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";
    buttonText.classList.remove('less');
    moreIcon.classList.remove('less');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less');
    moreIcon.classList.add('less');
  }
}

function toggleText2() {
  var showMoreText2 = document.getElementById("more2");
  var buttonText2   = document.querySelector("#moreButton2 span");
  var moreIcon2     = document.querySelector("#moreButton2 img");

  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";
    buttonText.classList.remove('less2');
    moreIcon.classList.remove('less2');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less2');
    moreIcon.classList.add('less2');
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="container-fluid clientbox text-center">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint"></div>
    <div id="more">
      <div class="row">
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class=" col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText()" id="moreButton">
            <span class="pink">Show More</span> 
            <img class="more" src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

<br>
<br>
<br>
<br>

<div class="container-fluid clientbox text-center">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint2"></div>
    <div id="more2">
      <div class="row">
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class=" col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText2()" id="moreButton2">
            <span class="pink2">Show More</span> 
            <img class="more2" src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You had some issues with the naming of your variables etc. (things coming up as undefined).

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText   = document.querySelector("#moreButton span");
  var moreIcon     = document.querySelector("#moreButton img");

  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText.innerHTML = "Show More";
    buttonText.classList.remove('less');
    moreIcon.classList.remove('less');
  } else {
    showMoreText.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('less');
    moreIcon.classList.add('less');
  }
}

function toggleText2() {
  var showMoreText2 = document.getElementById("more2");
  var buttonText2   = document.querySelector("#moreButton2 span");
  var moreIcon2     = document.querySelector("#moreButton2 img");

  if (startpoint.style.display === "none") {
    showMoreText2.style.display = "none";
    startpoint.style.display = "table-cell";
    buttonText2.innerHTML = "Show More";
    buttonText2.classList.remove('less2');
    moreIcon2.classList.remove('less2');
  } else {
    showMoreText2.style.display = "table-cell";
    startpoint.style.display = "none";
    buttonText2.innerHTML = "Show Less";
    buttonText2.classList.add('less2');
    moreIcon2.classList.add('less2');
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="container-fluid clientbox text-center">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint"></div>
    <div id="more">
      <div class="row">
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class=" col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText()" id="moreButton">
            <span class="pink">Show More</span> 
            <img class="more" src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

<br>
<br>
<br>
<br>

<div class="container-fluid clientbox text-center">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
    </div>

    <div id="startpoint2"></div>
    <div id="more2">
      <div class="row">
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class=" col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
        <div class="col-6 col-md-4 col-lg-3">
          <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
        </div>
      </div>
    </div>
    <button onclick="toggleText2()" id="moreButton2">
            <span class="pink2">Show More</span> 
            <img class="more2" src="./images/load-more.png" alt="">
            </button>
  </div>
</div>

With that said, there are much cleaner ways of constructing this logic. For instance, you could parse the event and look for a certain parent or child to toggle. That way, you can utilize the same function as long as it’s surrounded by the same html structure. You’d have to exchange the id’s for classes however.

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading