Cant show/hide within <details>

[knowncoder]

Hello, It seems that I cannot show/hide within the HTML <details> tag . I am using the following javascript

`
document.addEventListener('change', function() {
var usaDiv = document.querySelector('.usa');
var canDiv = document.querySelector('.can');

var regionDropdownValue = getCookie('RegionDropdown');

if (regionDropdownValue === 'USA') {
usaDiv.style.display = 'block';
canDiv.style.display = 'hidden';
} else if (regionDropdownValue === 'CAN') {
usaDiv.style.display = 'hidden';
canDiv.style.display = 'block';
} });`

to try and do so and it doesn't work as soon as I nest the <div class="usa"> tag within the <details> tag. Does anybody have a solution or know a work around where I can still use javascript?

 

[cittybb24356]

You mean hide or show a content within the html document?
Add this to the html div <div id="myDiv"> Toggled div </div>
This goes in your javascript
function evaluateBoolean() {

const div = document.querySelector("#myDiv");

if (location.hostname.indexOf("someval" > 0) { //you would add the value of the hostname.indexOf here. " "

div.hidden = true;

} else {

div.hidden = false;
}
//that is called the conditional statement. What is being done on a browser. True or false.

That's how you hide the content.

 

[knowncoder]

if you wrap something in <summary> and then <details> the details dropdown will not let javascript control what is shown or hidden in it because the details by default is hide or show so it overrides the javascript. So I was trying to find a way to override this