Using Mithril to generate HTML for a Bootstrap Accordion

Question

Have a problem using Mithril to generate a functioning Bootstrap accordion. When I write this HTML manually the accordion works ok.

<div id="mycontent">
    <div class="container">
        <div class="row">
            <div class="col-md-8 p-t-3">
                <div id="bookingaccordion" role="tablist">
                    <div class="panel panel-default">
                        <div id="headingOne" class="panel-heading"
                             role="tab">
                             <h4 class="panel-title">
                                 <a data-target="#collapseOne" data-toggle="collapse"
                                    data-parent="#bookingaccordion">
                                    Address and Contact details
                                 </a>
                             </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in"
                             role="tabpanel" aria-labelledby="headingOne">
                             Collapsible contact detail form
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div id="headingTwo" class="panel-heading" role="tab">
                            <h4 class="panel-title">
                                <a data-target="#collapseTwo" data-toggle="collapse"
                                   data-parent="#bookingaccordion">
                                   Booking details
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse"
                            role="tabpanel" aria-labelledby="headingTwo">
                            Collapsible booking detail form
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I can generate what seems to be exactly the same HTML using this code in a Mithril view.

return m("div.container", [
           m("div.row", [
               m("div.col-md-8.p-t-3", [
                   m("#bookingaccordion", {role: "tablist"}, [
                       m(".panel.panel-default", [
                           m("#headingOne.panel-heading", {role: "tab"}, [
                               m("h4.panel-title", [
                                   m('a[data-target="#collapseOne"
                                       data-toggle="collapse"
                                       data-parent="#bookingaccordion"]',
                                       "Address and Contact details"
                                   )
                               ])
                           ]),
                           m('#collapseOne.panel-collapse.collapse.in
                               [role="tabpanel" aria-labelledby="headingOne"]',
                               "Collapsible contact detail form"
                           )
      ]),
                        m(".panel.panel-default", [
                            m("#headingTwo.panel-heading", {role: "tab"}, [
                                m("h4.panel-title", [
                                    m('a[data-target="#collapseTwo"
                                        data-toggle="collapse"
                                        data-parent="#bookingaccordion"]',
                                        "Booking details"
                                    )
                                ])
                            ]),
                            m('#collapseTwo.panel-collapse.collapse
                                [role="tabpanel" aria-labelledby="headingTwo"]',
                                "Collapsible booking detail form"
                             )
                        ])
                    ])
                ])
            ])
        ]);

The generated HTML displays the accordion initial state perfectly, but there is no response (opening or closing) when clicking the title anchors. I suspect that I'm generating the data- elements incorrectly but I'm stumped.

score 2 · Accepted Answer · answered Jul 26 '16 at 09:23

2

Yes, the issue is on the data-* attributes, you have to pass them as attributes to the m function, like this:

m(
  'a', 
  {
    'data-target': "#collapseOne",
    'data-toggle': "collapse",
    'data-parent': "#bookingaccordion"
  },
  "Address and Contact details"
)

You have to do the same with the aria-* and role attributes.

answered Jul 26 '16 at 09:23

Vier

718
2
6
19

Great this answer works ! I noticed you used single-quotes for attribute name and double-quotes for the value. Is that important, and if so why ? Can't upvote - no reputation yet. – PeterW Jul 27 '16 at 11:46
@PeterW there's no difference in using single or double quotes, and some style guides (like this one from [airbnb](https://github.com/airbnb/javascript#strings)) recommend the use of single ones. I just used double quotes on the values because I was editing your code after copy pasting it. Even if you can't upvote, please consider accepting this answer by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Vier Jul 27 '16 at 12:44

Using Mithril to generate HTML for a Bootstrap Accordion

1 Answers1