title: How to add event listeners to radio button - mines not firing
body: <p>I have some inputs for dates but I only want to show them when the user clicks on a radio button "Date Range".
  So my html looks like this:</p>
  
  <pre><code>@*@Html.RadioButton("radioTimeFilter", "range", false) Date Range*@
  &lt;input id="radioTimeFilter" type="radio" value="false"&gt; Date Range
  &lt;div class="radio-content" style="display:none;"&gt;
      &lt;input id="txtDateOneFilter" type="text" style="width: 70px;" placeholder="Start Date" /&gt;&amp;nbsp;to&amp;nbsp;
      &lt;input id="txtDateTwoFilter" type="text" style="width: 70px;" placeholder="End Date" /&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>I would prefer to use html.radiobutton but w/e works. </p>
  
  <p>Now my function to collapse looks like: </p>
  
  <pre><code>function addCollapsibleCapabilities(coll) {
      for (var i = 0; i &lt; coll.length; i++) {
          coll[i].addEventListener("click", function () {
              alert(coll);
              this.classList.toggle("active");
  
              var content = this.nextElementSibling;
              if (content.style.display === "block") {
                  content.style.display = "none";
              } else {
                  content.style.display = "block";
              }
          });
      }
  }
  </code></pre>
  
  <p>I import the file and add the function </p>
  
  <pre><code>    var collapseDateRange = document.getElementById("radioTimeFilter");
      addCollapsibleCapabilities(collapseDateRange);
  </code></pre>
  
  <p>My alert is not firing. </p>