Hi there, I have a simple script that I need help with. Despite not being well-versed in JavaScript, I am using Bourbon and Neat for the frontend of my website. On one particular page, I want to implement a collapse script from Bourbon refills. My question is: how can I modify this script to only activate if the screen width is less than 480px? If the screen width is greater than or equal to 480px, I do not want the script to run.
Here is the HTML code:
<div class="expander">
<a href="javascript:void(0)" class="expander-trigger expander-hidden">Expandable section</a>
<div class="expander-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio mollitia fugiat facilis enim accusamus quisquam aut, repellendus incidunt quod optio facere labore illo numquam ipsum beatae vero debitis, fugit excepturi.</p>
</div>
</div>
And here is the JavaScript code:
$(document).ready(function() {
$('.expander-trigger').click(function(){
$(this).toggleClass("expander-hidden");
});
});