how to toggle a section whilst hiding the others using javascript?

Question

I found a code snippet from someone else explaining how to toggle on an element whilst hiding the other, although it was made with jquery. I need to have the same code in pure Javascript for my exam. Is there anyone that knows what my issue is now that i've converted it? I get the console warning

"(index):933 Uncaught TypeError:
document.querySelector(...).hideElement is not a function
at hideElement ((index):933)
at showDiv ((index):927)
at HTMLDivElement.onclick ((index):908)"

Can anyone help me either create a new Javascript function that will do toggle the hidden section on and hide the other sections or help me fix my code?

Here is the original jQuery code:

function showDiv(data) {
  $("#ele-" + data).addClass('visibleClass');
  hideElement(6, data);
}

function hideElement(total, active) {
  for (i = 1; i <= total; i++) {
    if (i != active)
      $("#ele-" + i).removeClass('visibleClass');
  }
}

.press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}

.visibleClass {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>

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

<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>

Here is what I did to convert it to javascript:

function showDiv(data) {
  document.querySelector("#ele-" + data).classList.add('visibleClass');
  hideElement(6, data);
}

function hideElement(total, active) {
  for (i = 1; i <= total; i++) {
    if (i != active)
      document.querySelector("#ele-" + i).removeClass('visibleClass');
  }
}

.press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}

.visibleClass {
  display: block !important;
}

<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>

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

<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>

Your snippet shows a different error than you describe. The error in the snippet is because you're calling `removeClass()` (which is a jQuery method) on a native Element object. Use `classList.remove('xxx')` instead. — Rory McCrossan, May 17 '21 at 10:07

score 0 · Accepted Answer · answered May 17 '21 at 10:08

Check if the visible class exists document.querySelector('.visibleClass') and remove it.

Then set the visibleClass to the clicked element.

function showDiv(data) {
    if (document.querySelector('.visibleClass')) {
        document.querySelector('.visibleClass').classList.remove('visibleClass');
    }
    document.querySelector("#ele-" + data).classList.add('visibleClass');
}

<style>
  .press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}
.visibleClass {
  display: block !important;
}
</style>

<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>
<br>
<br>
<br>
<br>
<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>

how to toggle a section whilst hiding the others using javascript?

1 Answers1