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

CC BY-SA 3.0
2017-03-09T21:50:17.743Z
It worked. Thank you that's really helpful, and much appreciated :)
mention79
CC BY-SA 3.0
2017-03-09T21:26:43.510Z
2017-03-09T21:26:43.510Z
hybrid_alex
<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>

<matrix>
Use Matrix to let client add Bootstrap Accordian Items
# 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 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:

  
    
      
        
          Senior Construction Planner
        
      
    

    ..variable content.. 

    
  


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.

  
    
      
        
          Senior Construction Planner
        
      
    

    ..variable content..

> **Comments:**
> **username_0**: It worked. Thank you that's really helpful, and much appreciated :)  

---

