Comment masquer l'élément div par défaut et l'afficher en clics à l'aide de javascript et bootstrap?

Cacher les éléments d'une page Web HTML et les montrer sur une certaine appuyez sur un bouton est assez simple à l'aide de CSS, Bootstrap et JavaScript. Il y a plusieurs approches de ce problème. Cependant, aucun d'entre eux ne peut être considéré comme optimal ou la «meilleure» solution. Cet article adoptera l'approche de la mise en place de la propriété DIV Display à aucun au début et de la modification avec l'aide de JavaScript.

Étape 1: Configurer le document HTML

La première étape consiste à commencer par créer un document HTML, et à l'intérieur de ce fichier HTML, incluez simplement un div et un bouton avec les lignes suivantes:

C'est le div
Cliquez pour montrer

Dans les lignes ci-dessus:

• UN est créé avec un identifiant spécifique qui est "Hidediv"
• Un bouton est créé avec le Tag, avec un ensemble de propriétés onclick égal à ButtonClicked () fonction à partir du fichier de script

À ce stade, le document HTML crée la page Web suivante sur le navigateur:

Un div avec texte et un bouton sont affichés sur la page Web.

Étape 2: Configuration du fichier CSS ou de la balise

Créez un fichier CSS et liez-le avec le document HTML ou utilisez un <style> balise. La div n'est pas encore assez importante. Par conséquent, ajouter un peu de style serait génial:

#hidediv
Color d'arrière-plan: YellowGreen;
hauteur: 150px;
Largeur: 150px;

Dans les lignes ci-dessus:

• Le div est référence en utilisant son identifiant comme «Hidediv ”
• Une hauteur et une largeur est spécifiée pour le div
• Une couleur d'arrière-plan a été donnée au div

À ce stade, le document HTML ressemble à ceci:

Cependant, pour masquer le div au début, ajoutez une ligne de plus au fichier CSS qui est:

Affichage: aucun;

La partie CSS entière deviendrait:

#hidediv
Affichage: aucun;
Color d'arrière-plan: YellowGreen;
hauteur: 150px;
Largeur: 150px;

Maintenant, le HTML ressemble à ceci:

Le div ne s'affiche pas sur la page Web HTML au début.

Étape 3: Configuration du fichier JavaScript ou de la balise

Maintenant, pour ajouter des fonctionnalités au bouton, appuyez sur, ajoutez simplement les lignes JavaScript suivantes au document HTML en utilisant un Tag ou un fichier JavaScript lié:

fonction boutonClicked ()
$ ("# sidiv").montrer();

Dans ces lignes:

• Une fonction boutonclucked () est créée qui serait appelée sur le clic du bouton en raison du sur clic() propriété définie à l'intérieur du étiqueter
• Le div est référencé par son identifiant qui est "Hidediv"
• La méthode show () est appelée sur la div qui permet afficher propriété

À ce stade, la page Web HTML fonctionne comme la suite:

Le div est affiché sur le bouton Appuyez sur le bouton et le problème a été entièrement abordé.

Conclure

Une div peut facilement être cachée au début d'une page Web avec l'aide du afficher propriété de l'élément HTML, et il peut facilement être affiché à nouveau sur le bouton Appuyez sur JavaScript. Cet article a affiché la procédure étape par étape pour atteindre la tâche à accomplir. Cependant, comme mentionné au début de cet article, il existe plusieurs approches de ce problème, et aucune d'entre elles ne peut être considérée comme la meilleure solution.