Currently in all screen sizes by default, the dropdown is expanded and for that, I've used $('#id_name').toogleClass('open') for expanding and collapsing. But I need to make dropdown work expanded by default in desktop view but collapsed by default in mobile view.
Please help me with that anyone?
You can use window.innerHeight, let width = window.innerWidth.
if (width <= 768) {
// you code for mobile view
}else{
// your code for desktop view
}
768 == iPhone 10 width
if (width <= 768) {
$dropdown.slideUp();
}else{
$dropdown.slidedown();
}it will work for you.
You can use media queries in jss
`
//Create a condition that targets
viewports at least 768px wide
constmediaQuery=window.matchMedia('(min-width: 768px)')
function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
// Then toggle the class here
console.log('Media Query Matched!') }
}
// Register event listener
mediaQuery.addListener(handleTabletChange)
// Initial check
handleTabletChange(mediaQuery)
`