How to Control Bootstrap Accordion Form Visibility

Question

I'm using the bootstrap accordion as a unique way of creating a form. Basically the form has 7 parts each in its own accordion panel. Right now I have it just as I want where they are all collapsed and when you open the first accordion there is a button that links to the second accordion. This is exactly how I want it to work. However is there a way to hide the other accordion panels until the "next" button has been selected?

For example when I load the page I just want them to be able to see " 1. Select Features " and when they open that and select their items when they press the next button thats when the second panel becomes visible and opens up. and so on.

I'm assuming I can maybe do something where I have them hidden and the button triggers it to be visible? I've been looking for examples of something like this but I can't find anything. I know this site isn't a code writing service so if someone can just point me to the right direction I can do the rest.


  
    
        1. Select Features  
    
    
      
            Testing 1
        
      
    
  


  
    
        2. Select Styles  
    
    
      
          Testing 2
        
      
    
  


  
    
        3. Contact Info  
    
    
      
          Testing 3

I recreated it in JSFiddle so you can see what I'm talking about and play with it.

Fiddle HERE

Zakaria Acharki · Accepted Answer

You can hide the divs you want for the first time on ready function using hide() method, e.g :

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

After that you should add an identifier id to every button next then attach a click event to it to control your accordion like you want on every click.

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

Hope this helps.

Snippet

$(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
        
      
    
  


  
    
        2. STANDARD FEATURES  
    
    
      
          Testing 2
        
      
    
  


  
    
        3. REAL ESTATE FEATURES  
    
    
      
          Testing 3

How to Control Bootstrap Accordion Form Visibility

Answers (2)

Related Questions