Answers.Body: <p>Yes, you can make use of the matrix loop index to create unique ID's.</p>
  
  <pre><code>&lt;!-- accordian --&gt;
    &lt;div class="panel-group contact-accordian" id="accordion" role="tablist" aria-multiselectable="true"&gt;
      &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
          &lt;h4 class="panel-title"&gt;
            &lt;a role="button" data-toggle="collapse" href="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapseOne" class="accordian-toggle"&gt;Senior Construction Planner&lt;/a&gt;
          &lt;/h4&gt;
        &lt;/div&gt;
      &lt;div id="collapse{{ loop.index }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
  
      ..variable content.. 
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /accordian --&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-09T21:50:17.743Z
Answers.Text: It worked. Thank you that's really helpful, and much appreciated :)
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-09T21:26:43.510Z
Answers.LastActivityDate: 2017-03-09T21:26:43.510Z
Answers.UserDisplayName: hybrid_alex
Body: <p>I'm creating a careers page on a site I'm working on and the design is for the jobs to go in an accordian that will slide open on click. So I'm thinking that this would need to be a matrix block as the client will need to be able to add as many jobs to the accordian as they want.</p>
  
  <p>The site is built with bootstrap, so I'm using the <a href="http://getbootstrap.com/javascript/#collapse-example-accordion" rel="nofollow noreferrer">bootstrap accordian</a> to build it. And for it to work each accordian item needs to have a unique ID, i.e. <code>id="collapseOne"</code> which links to href with the same name in the button in order to get it to expand and close. Here's an example of the code for one accordian line:</p>
  
  <pre><code>&lt;!-- accordian --&gt;
    &lt;div class="panel-group contact-accordian" id="accordion" role="tablist" aria-multiselectable="true"&gt;
      &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
          &lt;h4 class="panel-title"&gt;
            &lt;a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="accordian-toggle"&gt;Senior Construction Planner&lt;/a&gt;
          &lt;/h4&gt;
        &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
  
      ..variable content.. 
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /accordian --&gt;
  </code></pre>
  
  <p>So I need to work out a way to get this to work as a matrix field so that the client can add as many jobs as they need in Craft, and for it to function correctly as an accordian. </p>
  
  <p>Is it possible?</p>
  
Tags: <matrix>
Title: Use Matrix to let client add Bootstrap Accordian Items
ThreadText: # Use Matrix to let client add Bootstrap Accordian Items
  
  (Asked by: username_0 on 2017-03-09)
  
  I'm creating a careers page on a site I'm working on and the design is for the jobs to go in an accordian that will slide open on click. So I'm thinking that this would need to be a matrix block as the client will need to be able to add as many jobs to the accordian as they want.
  
  The site is built with bootstrap, so I'm using the [bootstrap accordian](http://getbootstrap.com/javascript/#collapse-example-accordion) to build it. And for it to work each accordian item needs to have a unique ID, i.e. `id="collapseOne"` which links to href with the same name in the button in order to get it to expand and close. Here's an example of the code for one accordian line:
  
  ```
  <!-- accordian -->
    <div class="panel-group contact-accordian" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="accordian-toggle">Senior Construction Planner</a>
          </h4>
        </div>
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
  
      ..variable content.. 
  
      </div>
    </div>
  </div><!-- /accordian -->
  
  ```
  
  So I need to work out a way to get this to work as a matrix field so that the client can add as many jobs as they need in Craft, and for it to function correctly as an accordian.
  
  Is it possible?
  
  **Tags:** matrix
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-03-09. Score: 3 | Accepted answer
  
  Yes, you can make use of the matrix loop index to create unique ID's.
  
  ```
  <!-- accordian -->
    <div class="panel-group contact-accordian" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" href="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapseOne" class="accordian-toggle">Senior Construction Planner</a>
          </h4>
        </div>
      <div id="collapse{{ loop.index }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
  
      ..variable content.. 
  
      </div>
    </div>
  </div><!-- /accordian -->
  
  ```
  
  > **Comments:**
  > **username_0**: It worked. Thank you that's really helpful, and much appreciated :)  
  
  ---
  
  