Cómo ocultar/mostrar contenido usando la clase de colapso en Bootstrap 5
Un componente plegable es muy esencial cuando desea mostrar una gran cantidad de contenido en una sola página web. La ventaja de usar un plegable es que le impide abarrotar su página web con un montón de contenido y, por lo tanto, mejorar la experiencia del usuario.
Un plegable básicamente le permite mostrar y ocultar contenido usando elementos HTML. Aquí hemos discutido cómo puede ocultar o mostrar contenido usando la clase de colapso en Bootstrap 5.
Cómo ocultar/mostrar contenido usando la clase de colapso en Bootstrap 5
Como ya se mencionó un plegable, vamos a mostrar y ocultar contenido enorme en una página web. Si se pregunta cómo se crea y se usa un plebra para ocultar/mostrar contenido con Bootstrap 5, consulte las próximas secciones.
Cómo ocultar contenido usando un elemento
Una forma de crear un plegable es usando el elemento.
Html
Este es un rumbo
Este es el primer párrafo.
Éste es el segundo párrafo.
Este es el tercer párrafo.
En el código anterior, el contenedor Div se ha hecho plegable asignándolo el .clase de colapso. Posteriormente, se ha colocado un poco de contenido dentro de ese div que se ocultará o se mostrará utilizando el botón plegable.
El elemento se está utilizando para ocultar/mostrar el contenido dentro del DIV plegable al asignar Data-bs-toggle = "colapso". Además, Data-BS-Target = "#ID" se usa para vincular el botón con el contenedor Div Plegable.
Producción
Así es como puedes ocultar/mostrar contenido usando botones plegables.
Cómo ocultar contenido usando una etiqueta
Otra forma de generar un plegable es usar la etiqueta. Aquí hemos mostrado este método en el fragmento de código a continuación.
Html
Haz click en miEl resto del código será el mismo que el anterior con la única diferencia que aquí hemos usado un etiqueta dentro de un elemento y para controlar el contenido que hemos asignado el data-bs-toggle = "colapso" a la etiqueta de anclaje y la identificación que conecta esta etiqueta al contenedor Div plegable se ha asignado al atributo HREF.
Producción
Un plegable se hizo con éxito usando la etiqueta de anclaje.
Cómo usar el .clase de show
Por defecto, el contenido dentro de un plegable se ocultará y se mostrará cuándo se hace clic en el botón o el enlace. Pero si desea que su contenido se muestre por defecto y oculte después de hacer clic en el botón/enlace, use el .clase de show.
Html
Aquí se le ha asignado al contenedor Div el .espectáculo clase junto con .clase de colapso. Esto alterará el comportamiento predeterminado del plegable y el contenido se mostrará por defecto y se ocultará una vez que se haga clic en el enlace.
Producción
El .La clase de exhibición funciona correctamente.
Conclusión
Con el fin de ocultar o mostrar contenido utilizando la clase de colapso asignar data-bs-toggle = "colapso" a un elemento o un etiqueta y vincule estos elementos con el elemento plegable usando data-bs-target = "#id" en caso de un botón y href = "#id" En caso de un enlace. Sin embargo, el contenido está oculto en un plegable de forma predeterminada, si desea cambiar este comportamiento predeterminado, use el .clase de show.