show / hide div can do without jquery?

Question

I have a script that is now working, but there's still conflict with other scripts on page that I have no control over... (hosted e-com site with limited access) - is there a way to accomplish this, but with plain javascript?

var $b = jQuery.noConflict(true);

var d = new Date();
var dayOfWeek = d.getUTCDay();
var hour = d.getUTCHours();
var mins = d.getMinutes();
var status = 'open';

if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 12 && hour < 22)
    status = 'open';
else
    status = 'closed';

if (status=='open')
    $b('.orderby').show();
else
    $b('.orderby').hide();

Possible duplicate of [Show hide divs on click in HTML and CSS without jQuery](http://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery) — NIKHIL RANE, Jul 21 '16 at 13:49
@NIKHILRANE - I need it to be timed, not on click. So it's different than what you posted. — M21, Jul 21 '16 at 13:51
@epascarello - not sure, but it breaks the cart & checkout pages, for which I have limited access, so I cannot change that, I must change this script, since it is what I do have access to. — M21, Jul 21 '16 at 13:52
if you have a `.hidden` class you can use something like this: http://stackoverflow.com/questions/35467207/javascript-toggle-classes-based-on-click-event — JKirchartz, Jul 21 '16 at 13:52

score 7 · Accepted Answer · answered Jul 21 '16 at 13:52

7

You only have 1 tiny bit of jquery in your code

if (status=='open') {
    $b('.orderby').show();
}else{
    $b('.orderby').hide();
}

This can be converted to

if (status=='open') {
    document.querySelector('.orderby').style.visibility = "visible";
}else{
    document.querySelector('.orderby').style.visibility = "hidden";
}

answered Jul 21 '16 at 13:52

Jamiec

133,658
13
134
193

7

visibility is different then show/hide, to have the same effect you should use `display: block/none` – jcubic Jul 21 '16 at 14:12

score 6 · Answer 2 · edited Dec 09 '20 at 14:24

6

You can use this:

var elem = document.querySelector(".elementClass");
elem.style.display = (status === 'open') ? 'block' : 'none';

edited Dec 09 '20 at 14:24

Pere

1,647
3
27
52

answered Jul 21 '16 at 13:50

kapantzak

11,610
4
39
61

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Yes. You can use querySelectorAll to get elements and loop over them and add a class that will set display: none.

show

var el = document.querySelectorAll(".orderby");
for(var k in el){
  el[k].className = el[k].className.replace("hide", "");
}

hide

var el = document.querySelectorAll(".orderby");
for(var k in el){
  el[k].className += 'hide';
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 21 '16 at 13:54

Rajesh

24,354
5
48
79

You can use [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) to save on having to string mash. – Jamiec Jul 21 '16 at 13:55
@Jamiec I was about to comment on your answer. I had a query, will doing `quertSelectorAll(..).classList += " something"` will add class to all or looping is necessary. Also will check your suggestion – Rajesh Jul 21 '16 at 13:59
1

`classList` is not a string its a DOMTokenList, and has methods like `toggle` - `el[k].classList.toggle("hide")` for example – Jamiec Jul 21 '16 at 14:01
Opps. I meant `className` – Rajesh Jul 21 '16 at 14:01
`className` is not a property of `NodeList` which is what `querySelectorAll` returns - they hide all this info in the docs you know? – Jamiec Jul 21 '16 at 14:03
I think, I'll have to study. Will update it with your suggestion. – Rajesh Jul 21 '16 at 14:05

score 0 · Answer 4 · answered Jul 21 '16 at 13:54

0

you could use this:

if (status=='open') {
        document.getElementsByClassName('orderby')[0].style.display = "block";
    }else{
        document.getElementsByClassName('orderby')[0].style.display = "none";
    }

answered Jul 21 '16 at 13:54

maverickosama92

2,685
2
21
35

show / hide div can do without jquery?

4 Answers4

show

hide