How to make dropdown expanded in desktop view but collapsed in mobile view?-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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) `

CodePudding user response：

   if (width <= 768) {
  $dropdown.slideUp();
}else{
  $dropdown.slidedown();
}

it will work for you.