0
295
VistasHow to show clickable buttons and sub buttons using flex property
I am new to web development, I am looking for a similar code to get the result as in the picture attached which is a responsive design with flex property of CSS. Once item1 is clicked the sub items should be visible and if we change the view to mobile they should be visible in a list. Does anyone has an idea about a similar code or can give me a hint. How to do it.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
This should work on mobile devices and pc's (try run it from both devices):
<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>I have a main div, which has 2 divs inside, 1 for pc, 1 for mobile devices, both have no display, if you are on pc, one of the divs (including its children, in our case it is the buttons) will display.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta