Hide/show elements using only Javascript without messing with DOM

Question

Just wondering, is it possible to use only Javascript to hide/show elements without using "style" method? So I won't have to use any inline CSS in my HTML element. Or even, how does jQuery perform the hide/show event in its core?

jQuery changes the style attribute. Changing the CSS (whether directly or by adding a class) is the only way to change an elements appearance. You could show/hide elements by adding/removing them from the DOM but then you have to keep track of where you pulled them from and how to put them back. — Mike Cluck
– Mike Cluck, Commented Apr 25, 2016 at 22:11

fbid · Accepted Answer · 2016-04-25 22:17:31Z

2

You can do it by adding/removing a CSS class with both Javascript and Jquery.

Assuming this is the CSS class that gets added to the DOM element:

.hide { display: none}

Then you can use:

Javascript v1

function toggleClass(element, className){
  if (!element || !className){
    return;
  }

  var classString = element.className, nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  }
  else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
  }
  element.className = classString;
}

Javascript v2 (classList.toggle() supported by most modern browsers)

document.getElementById('foo').classList.toggle('hide');

jQuery

$('#foo').toggleClass('hide');

answered Apr 25, 2016 at 22:17

fbid

1,5702 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zx485 · Accepted Answer · 2016-04-25 23:23:38Z

2

jQuery does it by manipulating styles.

There are many ways to manipulate the DOM:

manipulating the style attribute
adding/removing a class with some styles
just plain adding/removing an element from the DOM itself
etc.

But it all involves manipulating the DOM in some fashion, because that is what the browser renders.

edited Apr 25, 2016 at 23:23

zx485

29.1k28 gold badges55 silver badges65 bronze badges

answered Apr 25, 2016 at 22:14

BryanGrezeszak

5772 silver badges8 bronze badges

Comments

Ozrix · Accepted Answer · 2016-04-25 22:11:34Z

1

You can toggle CSS classes that will hide / show the elements for you. You have to manipulate the DOM in any case, though.

.hidden {
   display: none;
}

document.getElementById("foo").className += " hidden";

answered Apr 25, 2016 at 22:11

Ozrix

3,5052 gold badges20 silver badges28 bronze badges

Comments

akinuri · Accepted Answer · 2016-04-25 22:42:41Z

Let's do this using pure JavaScript.

removeElement() removes the element from DOM using Node.removeChild() and also saves both the element and its position in the DOM, in case you want to put it back.

insertElement(), as you would guess, puts the element back where it was using Node.insertBefore().

You can keep track of the removed elements in the removedElements object.

No CSS/inline-style modification.

var removedElements = {};

function removeElement(id) {
  var obj = {
    element	: document.getElementById(id),
    parent	: document.getElementById(id).parentNode,
    nextSibling	: document.getElementById(id).nextElementSibling,
  };
  removedElements[id] = obj;
  obj.parent.removeChild(obj.element);
}

function insertElement(id) {
  var obj = removedElements[id];
  obj.parent.insertBefore(obj.element, obj.nextSibling);
  delete removedElements[id];
}

removeElement("h1");
insertElement("h1");

<div id="container">
  <h1 id="h1">Lorem Ipsum</h1>
  <p id="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Collectives™ on Stack Overflow

Hide/show elements using only Javascript without messing with DOM

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related