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

El 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.