Dynamic accordion with Jade not working

Question

I am trying to create a dynamic accordian like below:

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}

    #collapse#{item}.panel-collapse.collapse
      .panel-body
        .col-lg-6
          // blah blah

Notice that I am trying to open a particular panel dynamically based on what callasible-pane ID it is assigned:

                  #collapse#{item}.panel-collapse.collapse

When I run this on a browser, I see this error:

  53|                         h4.panel-title
  54|                           a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}
> 55|                       #collapse#{item}.panel-collapse.collapse
  56|                         .panel-body
  57|                           .col-lg-6
  58|                             .my-form

  Unexpected token `interpolation` expected `text`, `code`, `:`, `newline` or `eos`
     at Parser.tag (/home/shubham/workspace/EVA2.0_bootstrap/node_modules/jade/lib/parser.js:828:15)

What am I missing?

Answer 1

This is not a valid JADE syntax.

If you want to write it like that you would have to do it like this

div(id="collapse#{item}").panel-collapse.collapse

Your code will look like this:

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}

    div(id="collapse#{item}").panel-collapse.collapse
      .panel-body
        .col-lg-6
          // blah blah

Test:

Codepen