Soy nuevo en el desarrollo web, estoy buscando un código similar para obtener el resultado que se muestra en la imagen adjunta, que es un diseño receptivo con propiedad flexible de CSS. Una vez que se hace clic en el elemento 1, los subelementos deberían estar visibles y, si cambiamos la vista a móvil, deberían estar visibles en una lista. ¿Alguien tiene una idea sobre un código similar o puede darme una pista? Cómo hacerlo.
Esto debería funcionar en dispositivos móviles y PC (intente ejecutarlo desde ambos dispositivos):
<div class='main'> <button id='mainbtn'> some button </button> <div class='btns' id='pcbtn' style='display:none;'> <button id='1'> sub1 </button> <button id='2'> sub2 </button> <button id='3'> sub3 </button> </div> <div id='mobbtn' style='display:none'> <li> <ul> <button id='1'> sub1 </button> </ul> <ul> <button id='2'> sub2 </button> </ul> <ul> <button id='3'> sub3 </button> </ul> </li> </div> </div> <script> document.getElementById('mainbtn').onclick = () => { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { document.getElementById('mobbtn').style.display = 'block'; } else { document.getElementById('pcbtn').style.display = 'flex'; } } </script>Tengo un div principal, que tiene 2 divs adentro, 1 para pc, 1 para dispositivos móviles, ambos no tienen pantalla, si estás en pc, uno de los divs (incluidos sus hijos, en nuestro caso son los botones) monitor.