如果我使用foreach，Joomla Accordion总是没有崩溃

Question

I want to use my joomla-component to display an element of a collapsable accordion for each dataset I got from my database.

Well, with static data everything is fine.

My code:

<div class="accordion" id="accordion2">
    <div class="accordion-group">

        <div class="accordion-heading">

            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
                <span class="label label-info">test</span>      
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse"  href="#collapseTwo">
                <span class="label label-success">test</span>      
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...         Anim pariatur cliche...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse"  href="#collapseThree">
                <span class="label label-success">Collapsible Group Item #3</span>      
            </a>
        </div>
        <div id="collapseThree" class="accordion-body collapse">
            <div class="accordion-inner">
                <div class="well"> Test</div>
            </div>
        </div>
    </div>  
</div>          

Here everything is fine. The first entry is opened if I load the page - all other entries are closed and can be opened by clicking on the href, see http://d.pr/i/wyd.

Well, if I try to build this accordion by using my database, the accordion works but all entries are opened by default.

Code:

echo "<div class='accordion' id='accordion2'>";
foreach($this->item->messages as $message) :
?>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapse<?php echo $message->id; ?>">
        <span class="label label-info">Test-Heading</span>      
        </a>
    </div>
    <div id="collapse<?php echo $message->id; ?>" class="accordion-body collapse in">
        <div class="accordion-inner">
            Anim pariatur cliche...
        </div>
    </div>
</div>                  
<?php
endforeach;
echo "</div>";

See: http://d.pr/i/AeXK

I don't get it. Maybe you can help me out?

Answer 1

It is difficult to diagnose without seeing the full source, but looking at what you've shared, it may need the $message->id converted into words, eg:

href="#collapseOne"

instead of

href="#collapse1"

If so, a function to do this can be found here: http://www.karlrixon.co.uk/writing/convert-numbers-to-words-with-php/