¿Cómo ocultar el elemento div de forma predeterminada y mostrarlo al hacer clic con JavaScript y Bootstrap?

La tarea es mostrar un div oculto al hacer clic con Bootstrap. Hay dos métodos para resolver este problema que se discuten a continuación:

Enfoque 1:

  • Establecer visualización: ninguna propiedad del div que debe mostrarse.
  • Utilice el método .show() para mostrar el elemento div.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to hide div element by default
        and show it on click using 
        JavaScript and Bootstrap ?
    </title>
      
    <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
      
    <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.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
      
    <p id="GFG_UP"></p>
      
    <div id="div">
        This is Div box.
    </div>
    <br>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
    <br>
      
    <p id="GFG_DOWN" style="color: green;"></p>
      
    <script>
        $('#GFG_UP').text(
        "Click on button to toggle the DIV Box using Bootstrap.");
  
        function show(divId) {
            $("#" + divId).show();
        }
  
        function GFG_Fun() {
            show('div');
            $('#GFG_DOWN').text("DIV Box is visible.");
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Enfoque 2:

  • Establecer visualización: ninguna propiedad del div que debe mostrarse.
  • Utilice el método .toggle() para mostrar la Div. Sin embargo, este método se puede usar para ocultar nuevamente el div.

Ejemplo: Este ejemplo implementa el enfoque anterior.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to hide div element by default and
        show it on click using JavaScript and
        Bootstrap ?
    </title>
      
    <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
      
    <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.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 19px;font-weight: bold;">
    </p>
      
    <div id="div">
        This is Div box.
    </div>
    <br>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
    <br>
      
    <p id="GFG_DOWN"
        style="color: green;">
    </p>
      
    <script>
        $('#GFG_UP').text(
"Click on button to toggle the DIV Box using Bootstrap.");
  
        function toggler(divId) {
            $("#" + divId).toggle();
        }
  
        function GFG_Fun() {
            toggler('div');
            $('#GFG_DOWN').text("DIV Box is toggling.");
        }
    </script>
</body>
  
</html>

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *