title: Using JS Event Listener to Determine Which PHP File to Display
body: <p>I'm using two different PHP files:</p>
  <pre><code>tabs.php
  accordion.php
  </code></pre>
  <p>Which are running a loop through the same data but displaying the data differently.</p>
  <p>Whichever file gets displayed depends on the users screen size.</p>
  <p>To determine this, I'm using a function with an event listener.</p>
  <pre><code>function switchOver(screenSize) {
      if (screenSize.matches) {
          document.getElementById(&quot;test&quot;).innerHTML = `&lt;?php include 'accordion.php';?&gt;`;
      } else {
          document.getElementById(&quot;test&quot;).innerHTML = `&lt;?php include 'tabs.php';?&gt;`;
      }
  }
  var screenSize = window.matchMedia(&quot;(max-width: 700px)&quot;)
  switchOver(screenSize)
  screenSize.addListener(switchOver)
  </code></pre>
  <p>Once the JS has determined the screen size, it just spits the php out into a container div</p>
  <pre><code>&lt;div id=&quot;test&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>On desktop the content will appear as Bootstrap 5 tabs and on mobile they will display as accordions. I know this isn't truly responsive but it is working as expected.</p>
  <p>I have a few questions that hopefully someone with more technical knowledge can clear up for me:</p>
  <ol>
  <li>Is this secure?</li>
  <li>Is there a more graceful alternative I could learn about?</li>
  </ol>
  <p>Any advice is truly appreciated!</p>