I have a unique website layout that adjusts to different screen sizes, and I've incorporated some jQuery functionality. Here is a snippet of the code:
<script>
$(document).ready(function(){
$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").show();});
$("#D1200C36LPB3").click(function(){$("#D1200C36LPB3_details").show();});
$("#D1-3CA36LPB3").click(function(){$("#D1-3CA36LPB3_details").show();});
$("#D1-0CA36LPB3").click(function(){$("#D1-0CA36LPB3_details").show();});
$("#D700S36LPB3").click(function(){$("#D700S36LPB3_details").show();});
$("#D700S24LMB3").click(function(){$("#D700S24LMB3_details").show();});
});
</script>
In the code above, all the div elements like #D1000C36LPB3_details have their initial CSS property set to display: none, making them invisible until clicked on by the corresponding div element like #D1000C36LPB3, which then displays the content.
Now, I want to modify the script to change the display property to fixed when the viewport/window width is less than 400px.
My solution
I've identified a solution to set the display property to fixed:
$("#corresponding_ID").css("display", "fixed");
However, I need to prevent the initial jQuery script from running (the one with .show()).