title: Toggle behaviour based on screen width
body: <p>The goal here is to make a page responsive and mobile friendly.</p>
  
  <p>I show an invoice with all its details when on a desktop. But when the viewport is reduced, the details are hidden and can be toggled (hide/unhide) on clicking/tapping.</p>
  
  <p>So I have a <code>trigger</code> and a <code>target</code> class.</p>
  
  <pre><code>$('.trigger').click(function(){
      $('.target').toggleClass('hide');
  })
  </code></pre>
  
  <p>This works as expected if I add the <code>hide</code> class to <code>target</code> in my markup. But I cannot do that as they should appear unless the user views the page at a small screen. I can set <code>display: none</code> in the media queries but that hides target for good.</p>
  
  <p>What property of the <code>target</code> element should I modify so that it hides itself when the screen size is reduced and I can toggle its view with the <code>hide</code> class? </p>