I’m writing a inline Razor / css web application for a game community I’m trying to setup and I’m merely a hobbyist.

On the home page I’ve written a news feed that pulls data using SQLDataReaders, I iterate out the latest 10 articles and a inner loop starts and iterates out comments associated with each of those articles.

Initially this was done in table row and column format but I understood this isn’t compatible with something like this -> https://www.w3schools.com/howto/howto_js_collapsible.asp. So I now don’t use tables for news comments themselves – but still the Collapsible button doesn’t do anything.

```while (matchedcomments.Read()) // an instance of a SQLDataReader
{



    <button type="button" class="collapsible">Comments (@matchedcomments.GetInt32(0))...</button>



    @:<div class="contenta">
        while (commentdetails.Read()) //another SQLDataReader
        {



            <p>@commentdetails.GetString(2):   @commentdetails.GetString(3)</p>
        }
    @:</div>

   Later on in the file is the script itself.

<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 contenta = this.nextElementSibling;
               if (contenta.style.display === "block") {
                   contenta.style.display = "none";
               } else {
                   contenta.style.display = "block";
               }
           });
       }
   </script>```

The page uses a header file include that has this CSS

```/* Style the button that is used to open and close the collapsible content */
  .collapsible {
      background-color: saddlebrown;
      color: white;
      cursor: pointer;
      padding: 2px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 10px;
  }

      /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
      .active, .collapsible:hover {
          background-color: darksalmon;
      }

  /* Style the collapsible content. Note: hidden by default */
  .contenta {
      padding: 0 2px;
      display: none;
      overflow: hidden;
      background-color: darkolivegreen;

  }

“`

I’ve been stuck on this particular issue on and off for awhile and at this stage the comments are hidden but the button doesn’t unhide them either? The hover CSS change works on the button. If anyone can help, I’d appreciate it 🙂