El botón plegable se utiliza para ocultar o mostrar la lista de contenidos al hacer clic en el botón. Al hacer clic en el botón plegable, se expande y muestra una lista de contenidos para seleccionar, que luego se asigna a un contenido específico.
El botón plegable en la vista móvil aparece solo en la pantalla de tamaño móvil y desaparece en los dispositivos de pantalla grande.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width,initial-scale=1"> <!-- Bootstrap links --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <span><b>GeeksforGeeks</b></span> <!-- Button to extend the menu --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false"> <span class="sr-only"> Toggle navigation </span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Display content of collapse button --> <div class="collapse navbar-collapsed" id="collapsable-nav"> <ul id="nav-list" class="nav navbar-nav navbar-right"> <hr> <li><a href="#c">C</a></li> <li><a href="#b">C++</a></li> <li><a href="#s">Java</a></li> <li><a href="#s">Python</a></li> </ul> </div> </div> </div> </nav> </body> </html>
Producción:
En pantalla grande/escritorio/pantalla portátil:
En pantalla pequeña/pantalla móvil:
Publicación traducida automáticamente
Artículo escrito por poojavichare1810 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA