1

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:

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

Improve this question

1 Answer 1

Reset to default
3

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 -->
Improve this answer
1
  • It worked. Thank you that's really helpful, and much appreciated :)
    – mention79
    Commented Mar 9, 2017 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.