Changing CSS element using Javascript or change using CSS <noscript>-CodePudding

This has been asked before and i've read several previous questions but for some reason the solutions are not working for me, i'm sure this is pretty simple, i just know basically 0 HTML, CSS and JS.

Bit of background, i have a Python program that outputs an HTML file, this has some basic Javascript and CSS in it in order to create a collapsible. The default of the collapsible is all collapsed. However sometimes i need to view this page on a browser that has javascript disabled (eg: when you open a HTML file emailed to an iOS device). In order to that i need the collapsible to be all un-collapsed if Javascript can't be executed. Here's what i have and what i've tried so far:

<head>
    <style>
    .collapsible {
    cursor: pointer;
    border: none;
    text-align: left;
    outline: none;
    }
    .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    }
    </style>
</head>

<body>
        <h2 class="collapsible">Here's a section to open</h2>
        <div class="content">
            <p>Here's some revealed content</p>
        </div>
        <h2 class="collapsible">Here's another section to open</h2>
        <div class="content">
            <p>Here's more revealed content</p>
        </div>
</body>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i  ) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
    } 
  });
}

  </script>

I've tried adding the following to :

document.getElementsByClassName("content").style.maxHeight = "0";

and setting the CSS of content.max-height to 100 by default, so that if javascript can't run the max-height is kept at 100 and all content divs are shown. This doesn't work Edge debug tools say:

Uncaught TypeError: Cannot set properties of undefined (setting 'maxHeight')

I also tried adding the following in after the main style tag to override the original CSS if javscript isn't supported:

   <noscript>
    <style>
   .content {
    max-height: 100;
    }
    </style>
    </noscript>

That didn't work either

CodePudding user response：

I am not having the bug occur with your code. Maybe the placement of your noscript tag was causing issues? Try this code and see if you have issues with it. It may also be a lack of html / css support in your email client if this is intended to be used in email.

I changed a couple things that were mainly cosmetic/readability/preference changes. Using the forEach method instead of a loop. Moving the style & script tags into the body as they might be used for email components.

<body>
  <style>
    .collapsible {
      cursor: pointer;
      border: none;
      text-align: left;
      outline: none;
      user-select: none;
    }
    .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
  </style>
  
  <h2 class="collapsible">Here's a section to open</h2>
  <div class="content">
    <p>Here's some revealed content</p>
  </div>
  <h2 class="collapsible">Here's another section to open</h2>
  <div class="content">
    <p>Here's more revealed content</p>
  </div>

  <script>
    const allColls = document
      .querySelectorAll(".collapsible");
    
    allColls.forEach(coll => {
      coll.addEventListener("click", e => {
        e.target.classList.toggle("active");
        const content = e.target.nextElementSibling;
        if (content.style.maxHeight)
          content.style.maxHeight = null;
        else 
          content.style.maxHeight = 
            content.scrollHeight   "px";
      });
    });
  </script>
  <noscript>
    <style>
      .content {
        max-height: 100;
      }
    </style>
  </noscript>
</body>