如何控制Bootstrap手风琴表格的可见性

我正在使用bootstrap手风琴作为创建表单的独特方式.基本上,该表格在其自己的手风琴面板中各有7个部分.现在我正好想要它们全部倒塌的地方,当你打开第一架手风琴时,有一个按钮连接到第二个手风琴.这正是我希望它的工作方式.但是有没有办法隐藏其他手风琴面板,直到选择"下一个"按钮？

例如,当我加载页面时,我只是希望他们能够看到"1.选择功能",当他们打开它并按下下一个按钮时选择他们的项目,当第二个面板变得可见并打开时.等等.

我假设我可以做一些我隐藏它们的按钮并且按钮触发它可见？我一直在寻找这样的例子但我找不到任何东西.我知道这个网站不是代码编写服务,所以如果有人可以指出我正确的方向,我可以做其余的事情.

  

    

      
  1. Select Features  
    
    

      

            Testing 1
         Next 
      
    
  


  

    

      
  2. Select Styles  
    
    

      

          Testing 2
         Next 
      
    
  


  

    

      
  3. Contact Info  
    
    

      

          Testing 3
         Next 
      
    
  

我在JSFiddle中重新创建它,这样你就可以看到我在说什么并玩它.

这里提琴

您可以使用hide()方法首次在ready函数中隐藏所需的div ,例如:

$('#panel2, #panel3').hide();

之后,您应该id为每个按钮添加一个标识符,next然后将一个click事件附加到它,以便accordion在每次点击时控制您想要的内容.

$('body').on('click', '#btn-next-id', function(){
    //Here show hide divs you want
})

希望这可以帮助.

片段

$(function(){
    //Hide other steps for the first time
    $('#panel2, #panel3').hide();
    
    $('body').on('click', '#next1', function(){
        $('#panel2').show();
    })

    $('body').on('click', '#next2', function(){
        $('#panel3').show();
    })
})

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

I'm using the bootstrap accordion. 



  

    

      
  1. CHOOSE YOUR INDUSTRY  
    
    

      

            Testing 1
         Next 
      
    
  


  

    

      
  2. STANDARD FEATURES  
    
    

      

          Testing 2
         Next 
      
    
  


  

    

      
  3. REAL ESTATE FEATURES  
    
    

      

          Testing 3
         Next