CODEWITHSUNDEEP
javascripthtmlcss
manuelmsni
manuelmsni

Reputation: 23

Show and hide different elements by class with the same JS function

I want to create a js or jq function to hide and show items by class with two variables, the class of the items to be shown and the class of the items to be hidden.

I can't make it works. Do anyone know what happens?

function ShowHide(ShowClass, HideClass) {
  document.getElementsByClassName(ShowClass).show();
  document.getElementsByClassName(HideClass).hide();
}
.ABChidden,
.DEFhidden {
  display: none;
}
<button class="ABCvisible" type="button" onclick="ShowHide('ABChidden', 'ABCvisible');">
      Click Me to show ABC
    </button>
<p class="ABChidden">I'm ABC</p>
<button class="ABChidden" type="button" onclick="ShowHide('ABCvisible', 'ABChidden');">Click Me to hide ABC</button>

<hr>

<button class="DEFvisible" type="button" onclick="ShowHide('DEFhidden', 'DEFvisible');">
      Click Me to show CGE
    </button>
<p class="DEFhidden">I'm DEF</p>
<button class="DEFhidden" type="button" onclick="ShowHide('DEFvisible', 'DEFhidden');">Click Me to hide CGE</button>

Upvotes: 0

Views: 1791

Answers (4)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

  1. Place each section in a container.
  2. In the onclick listener, send in the clicked element with 'this' (this = the button element).
  3. In the method toggleVisibility, go up a node to the parent element - the .container and toggle it's class.
  4. Set CSS classes to .show and .hide, based on if the parent have the class .hidden.

function toggleVisibility(element) {
  element.parentNode.classList.toggle("hidden");
}
.hide {
  display: none;
}

.container.hidden > .show {
  display: none;
}

.container.hidden > .hide {
  display: block;
}
<div class="container">
  <button class="show" type="button" onclick="toggleVisibility(this)">
      Click Me to show ABC
    </button>
  <p class="hide">I'm ABC</p>
  <button class="hide" type="button" onclick="toggleVisibility(this)">Click Me to hide ABC</button>
</div>


<hr>

<div class="container">
  <button class="show" type="button" onclick="toggleVisibility(this)">
      Click Me to show CGE
    </button>
  <p class="hide">I'm DEF</p>
  <button class="hide" type="button" onclick="toggleVisibility(this)">Click Me to hide CGE</button>
</div>

Upvotes: 0

Jake
Jake

Reputation: 199

Firstly, if you run

document.getElementsByClassName('ABChidden')

it returns a list. Secondly, show and hide are both not functions, so it won't run anyway

Try this:

function ShowHide(showClass,hideClass){
   document.getElementsByClassName(showClass)[0].hidden='false';
   document.getElementsByClassName(hideClass)[0].hidden='true';
}

Upvotes: 0

Subhash Jha
Subhash Jha

Reputation: 38

You have to set the display property of the ShowClass and HideClass elements one by one. It can be easily done using loop.

function ShowHide(ShowClass, HideClass) {
  elementsToDisplay = document.getElementsByClassName(ShowClass);
  elementsToHide = document.getElementsByClassName(HideClass);

  [...elementsToDisplay].forEach(elem => (elem.style.display = "block"));
  [...elementsToHide].forEach(elem => (elem.style.display = "none"));
}

Upvotes: 0

Barmar
Barmar

Reputation: 781340

You can't use jQuery methods like .css() with DOM objects, you need to create a jQuery collection object with $().

function ShowHide(ShowClass, HideClass) {
  $(`.${ShowClass}`).show();
  $(`.${HideClass}`).hide();
}
.ABChidden,
.DEFhidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="ABCvisible" type="button" onclick="ShowHide('ABChidden', 'ABCvisible');">
      Click Me to show ABC
    </button>
<p class="ABChidden">I'm ABC</p>
<button class="ABChidden" type="button" onclick="ShowHide('ABCvisible', 'ABChidden');">Click Me to hide ABC</button>

<hr>

<button class="DEFvisible" type="button" onclick="ShowHide('DEFhidden', 'DEFvisible');">
      Click Me to show CGE
    </button>
<p class="DEFhidden">I'm DEF</p>
<button class="DEFhidden" type="button" onclick="ShowHide('DEFvisible', 'DEFhidden');">Click Me to hide CGE</button>

or use ordinary JavaScript DOM methods and set the style property of all the selected elements.

function ShowHide(ShowClass, HideClass) {
  Array.from(document.getElementsByClassName(ShowClass)).forEach(el =>
    el.style.display = 'block');
  Array.from(document.getElementsByClassName(HideClass)).forEach(el =>
    el.style.display = 'none');
}
.ABChidden,
.DEFhidden {
  display: none;
}
<button class="ABCvisible" type="button" onclick="ShowHide('ABChidden', 'ABCvisible');">
      Click Me to show ABC
    </button>
<p class="ABChidden">I'm ABC</p>
<button class="ABChidden" type="button" onclick="ShowHide('ABCvisible', 'ABChidden');">Click Me to hide ABC</button>

<hr>

<button class="DEFvisible" type="button" onclick="ShowHide('DEFhidden', 'DEFvisible');">
      Click Me to show CGE
    </button>
<p class="DEFhidden">I'm DEF</p>
<button class="DEFhidden" type="button" onclick="ShowHide('DEFvisible', 'DEFhidden');">Click Me to hide CGE</button>

Upvotes: 3

Related Questions