如何默认情况下隐藏div元素，并使用JavaScript和Bootstrap在单击时显示它？

任务是在使用Bootstrap单击时显示一个隐藏的div。有两种解决此问题的方法，下面讨论：

方法1：

• 设置显示：需要显示的div的none属性。
• 使用.show()方法显示div元素。

示例：此示例实现了上述方法。

  

    
        How to hide div element by default
        and show it on click using 
        JavaScript and Bootstrap ?
    
      
    
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    
      
    
      
    
    

  

      
     
        GeeksForGeeks 
    
      
    
      
    
        This is Div box.
    
    
      
    
        click here
    
    
      
    
      
    
        $('#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.");
        }
    

  

输出：

• 在单击按钮之前：
  
• 单击按钮后：
  

方法二：

• 设置显示：需要显示的div的none属性。
• 使用.toggle()方法显示Div。但是，可以使用此方法再次隐藏div。

示例：此示例实现了上述方法。

  

    
        How to hide div element by default and
        show it on click using JavaScript and
        Bootstrap ?
    
      
    
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    
      
    
      
    
    

  

      
     
        GeeksForGeeks 
    
      
    
    
      
    
        This is Div box.
    
    
      
    
        click here
    
    
      
    
    
      
    
        $('#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.");
        }
    

  

输出：

• 在单击按钮之前：
  
• 单击按钮后：