using an each index loop to create collapsable menus with jade

Question

using an each index loop to create collapsable menus with jade

I'm Looking to build a loop that will show all of my members with a collapse card. I looked around for code that did something similar and I found something like the <% index+1 %> tags like below but if they work I don't know the Jade syntax.

each user, index in currentUsers
     .col-lg-12
        #accordion.panel-group
            #panel1.panel.panel-default
                .panel-heading
                    h4.panel-title
                          a(data-toggle='collapse', data-target='#collapse<%= index+1 %>', href='#collapse<%= index+1 %>')
                                    h1 #{user.Name}
                        #collapse<%= index+1 %>.panel-collapse.collapse.in
                            .panel-body
                                 ....

javascript
node.js
twitter-bootstrap
jade

Answer 1

each user, index in currentUsers
  .col-lg-12
    #accordion.panel-group
        #panel1.panel.panel-default
            .panel-heading
              h4.panel-title
                a(
                  data-toggle='collapse',
                  data-target="#collapse#{index + 1}",
                  href="#collapse#{index + 1}"
                )
                  h1 #{user.Name}
                div(id="#collapse#{index + 1}.panel-collapse.collapse.in")
                  ...