Show a hidden DIV when jQuery runs (and hides another DIV)

Question

I've created a script that hides a DIV Class if it contains the text "No Event Found" or "Error". This part is working great, however when this happens I would like a hidden DIV ID to load in it's place. (#brxe-akqmjs)

<script>
const divs = document.getElementsByClassName('etn-not-found-post');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No Event Found' || content == 'Error') {
        div.style.display = 'none';
    }
}
</script>

How do I go about getting this to load correctly? The DIV I want to show is set to display:none.

Many thanks in advance.

I have tried adding if statements but this only results in the original code breaking.

The simplest way for some is to use the `hidden` attribute: e.g. `document.getElementsByClassName('etn-not-found-post').hidden = true` — Tibrogargan, Jan 18 '23 at 05:52
Unfortunately didn't answer my question. I'm able to hide the '.etn-not-found-post' DIV no problem, but I want a 2nd hidden DIV to show when this happens. This DIV has an ID of #brxe-akqmjs. — isostu, Jan 18 '23 at 06:24
The way you would hide/show a second `div` is exactly the same as how for the first div. Literally the only difference is the method you would use to select the DOM elements. — Tibrogargan, Jan 18 '23 at 19:39

Lokesh Yadav · Answer 1 · 2023-01-18T10:12:20.537

0

It depends on how that hidden DIV with ID been implemented.

Let me try to cover two approaches:

DIV is hidden with css using display: none;
DIV is hidden using attribute hidden

For both cases, first get the element reference by ID. For e.g.

var divWithID = document.getElementById("divWithID");

Now for case 1,update the style property.

dovWithId.style.display = "block";

For case 2, set the hidden attribute value to false

divWithID.setAttribute("hidden", false);

Hope this helps and clarifies your question.

edited Jan 18 '23 at 10:12

answered Jan 18 '23 at 05:56

Lokesh Yadav

1,574
5
23
50

2

You can't add # when you call the document.getElementById() method. It will only accept id names. – Mohammad Nasir Jan 18 '23 at 06:05
Thanks for your detailed reply. I tried following and was not able to get the 2nd DIV to show when my code above fires. To clarify, I'm able to hide the '.etn-not-found-post' DIV class no problem...I just can't get the hidden DIV ID to show when it does. – isostu Jan 18 '23 at 06:40
@isostu You are hiding your 2nd DIV with display: none or hidden attribute? Also, please try to use [https://jsfiddle.net/] or [https://codesandbox.io/] or https://codepen.io/] where you put actual code. This will help us better understand the use case and problem statement. – Lokesh Yadav Jan 18 '23 at 10:14

score 0 · Answer 2 · answered Jan 18 '23 at 06:10

0

You can simply using jquery hide() and show() method to hide and show the content. Here I rewrite the function in jquery format.

<script>
const divs = $('.etn-not-found-post');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No Event Found' || content == 'Error') {
        div.hide();
    }else{
        div.show();
    }
}
</script>

answered Jan 18 '23 at 06:10

Mohammad Nasir

79
8

thanks for your reply. Unfortunately it doesn't seem to work and what was once hidden in my code above now shows again. For clarity I'm happy with this being hidden but I just want a 2nd DIV to show once it is hidden. – isostu Jan 18 '23 at 06:22

Show a hidden DIV when jQuery runs (and hides another DIV)

2 Answers2