CODEWITHSUNDEEP
htmltwitter-bootstrapjquery-uihtml-tableaccordion
Nathan R
Nathan R

Reputation: 870

Accordion table only displays one row when clicked (bootstrap)

I made a table/accordion thing that has hidden rows that are only visible when you click the "header" row. Unfortunately, the table only displays a ONE row for each header you click.

jsfiddle

As you can see in the code, each header row (ex: "9 / Parts Inspection") has two sub rows that are hidden (ex: "9.1" and "9.2"). When you click, only the first one (9.1) appears, leaving the others (9.2 and any others I add) hidden when they are supposed to be shown.

I'm assuming it's a problem with the class/id names getting confused, but no matter what different names I give things, it still doesn't work. 

<table id="tbl-sample-values" class="table table-condensed table-bordered table-hover" style="font-size:85%;">
    <thead>
        <tr class="tabletop">
            <th>Step #</th>
            <th>Processing Step</th>
            <th>Barcode</th>
        </tr>
    </thead>

    <tbody>

        <tr data-toggle="collapse" data-target="#accordion" class="clickable row-header">
            <td>9</td>
            <td colspan="2">Parts Inspection</td>
        </tr>

        <tr id="accordion" class="collapse">
            <td>9.1</td>
            <td>Handle silicon electrodes...</td>
            <td>[Barcode here]</td>
        </tr>

        <tr id="accordion" class="collapse">
            <td>9.2</td>
            <td>Verify part number...</td>
            <td>[Barcode here]</td>
        </tr>

        <tr data-toggle="collapse" data-target="#accordion2" class="clickable row-header">
            <td>10</td>
            <td colspan="2">IPA Clean</td>
        </tr>

        <tr id="accordion2" class="collapse">
            <td>10.1</td>
            <td>Place part with frontside facing up...</td>
            <td>[Barcode here]</td>
        </tr>

        <tr id="accordion2" class="collapse">
            <td>10.2</td>
            <td>Wipe the part using cleanroom wiper...</td>
            <td>[Barcode here]</td>
        </tr>

    </tbody>
</table>

Upvotes: 1

Views: 1023

Answers (1)

omid nematollahi
omid nematollahi

Reputation: 461

Give your tr's the same class instead of an unique id. Use this class as your data-target. For example:

<tr data-toggle="collapse" data-target=".my-row" class="clickable row-header">
    <td>9</td>
    <td colspan="2">Parts Inspection</td>
</tr>

<tr id="accordion" class="my-row collapse">
    <td>9.1</td>
    <td>Handle silicon electrodes...</td>
    <td>[Barcode here]</td>
</tr>

<tr id="accordion" class="my-row collapse">
    <td>9.2</td>
    <td>Verify part number...</td>
    <td>[Barcode here]</td>
</tr>

I hope this helps.

Upvotes: 1

Related Questions