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.

<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. Select Features </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. Select Styles </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel3">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. Contact Info </a> </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 3
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
      </div>
    </div>
  </div>

</div>

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

Fiddle HERE

Answer 1

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

I'm using the bootstrap accordion. 


<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. STANDARD FEATURES </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel3">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. REAL ESTATE FEATURES </a> </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 3
        <button id="next3" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
      </div>
    </div>
  </div>

</div>

Answer 2

I'm not sure if this is exactly what you're looking for but how about simply removing the anchor element from step 2 and step 3's headings so a user can't click them to open them? Updated fiddle here: https://jsfiddle.net/DTcHh/15338/

<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title">  2. STANDARD FEATURES </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel3">
    <div class="panel-heading">
      <h4 class="panel-title"> 3. REAL ESTATE FEATURES </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 3
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
      </div>
    </div>
  </div>

</div>

You even add a "Previous" button to steps 2 and 3 so they can go back up the process? Updated fiddle here for this here: https://jsfiddle.net/DTcHh/15339/