JS Accordion geöffnet wegen PHP while Schleife?

[xFrager]

Hallo,
ich habe das Problem, dass ich eine ID, Überschrift und Text aus einer Datenbank auslesen will.
Dies soll dann in ein Javascript Accordion eingefügt werden.
Dies funktioniert auch, aber wenn man die Seite anklickt, sind alle Accordions geöffnet.
Wenn ich die while Schleife deaktiviere und festen Inhalt reinschreibe, geht es.

Also liegt es wahrscheinlich an dem while?
Hier ist der Teil:

<?php           
        $query = mysql_query("SELECT id, headline, text, cdate FROM news ORDER BY cdate DESC");
                    while($row = mysql_fetch_assoc($query))
                    {
                        $id = $row['id'];
                        $head = $row['headline'];
                        $text = $row['text'];
                        $cdate = $row['cdate'];
                     
                    ?>
                        <div class="artikel"> 
                            <div class="accordion" id="accordion2">
                                <div class="accordion-group">
                                <div class="accordion-heading">
                                    <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#<?php echo $id ?>">
                                        <i class="icon-arrow-down"></i> <?php echo $head ?>
                                    </div>
                                </div>
                                <div id="<?php echo $id ?>" class="accordion-body collapse in">
                                    <div class="accordion-inner">
                                        <p><?php echo $text ?></p>
                                    </div>
                                </div>
                                </div>
                        </div>
                    </div>                 
            <?php }} else {}; ?>

 

[bdt600]

Versuche es mal mit

echo htmlentities($variable);

 

[xFrager]

So:

                        <div class="artikel"> 
                            <div class="accordion" id="accordion2">
                                <div class="accordion-group">
                                <div class="accordion-heading">
                                    <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#<?php echo htmlentities($id); ?>">
                                        <i class="icon-arrow-down"></i> <?php echo htmlentities($head); ?>
                                    </div>
                                </div>
                                <div id="<?php echo htmlentities($id); ?>" class="accordion-body collapse in">
                                    <div class="accordion-inner">
                                        <p><?php echo htmlentities($text); ?></p>
                                    </div>
                                </div>
                                </div>
                        </div>
                    </div>

bleiben trotzdem geöffnet.

 

[bdt600]

Dann sieh' dir den Quellcode an, den der Browser bekommt. Vielleicht findest du so das Problem.

 

[xFrager]

Der sieht genauso aus, wie er sein sollte. Kann man irgendwie einen auf ein Element einen "Klick immitieren" Wenn die Seite geladen wird?

 

[bdt600]

Link zur Seite?! Ansonsten sehe ich keine weitere Hilfe für möglich. Validator schon mal drüberlaufen lassen?

 

[xFrager]

Der Validator zeigt ein paar Fehler an, da ich mit Boostrap arbeite.

Wenn man auf den Reiter FAQ geht, sieht man wie es sein sollte. Dort nutze ich kein PHP.

Nur wenn ich alles in eine while Schleife reinschreibe (News) , stehen alle offen.

http://zevionhd.bplaced.net/index.php

 

[Tronjer]

Wenn ich die while Schleife deaktiviere und festen Inhalt reinschreibe, geht es.

Dann wird der Fehler dort liegen. Dem JS ist es egal, ob es statisches oder durch PHP gerendertes HTML anspricht.

 

[xFrager]

und wie kann man das rausfinden, warum das so ist?

Ich habe schon error reporting und alles eingeschaltet, bekomme aber keine fehler.

 

[Tronjer]

Ich habe es mir mal im Browser angeschaut. Das JS ist ein Bootstrap-Plugin und ich vermute mal, dass der Fehler darin liegt, wie du dieses Script bzw. mit welchen Parametern du es aufrufst.

Ein einfacher Workaround wäre, auf die Akkordeon-Elemente ein hide() zu legen, damit sie nach dem Laden der Seite geschlossen sind.

 

[xFrager]

ich denke, dass du jetzt jquery meinst?
Ich habe es jetzt schon in mein Script eingebunden.
Wie muss ich das nun verwenden? Ich verstehe den Eintrag bei hide() auf der Seite von jQuery nicht..

 

[Tronjer]

ich denke, dass du jetzt jquery meinst?
Ich habe es jetzt schon in mein Script eingebunden.
Wie muss ich das nun verwenden? Ich verstehe den Eintrag bei hide() auf der Seite von jQuery nicht..

Was ist an

$('.target').hide()

schwer verständlich?

Ich würde dir stattdessen aber empfehlen, hier nachzuschauen. Dann brauchst du den Workaround mit hide() nicht.
http://getbootstrap.com/javascript/#collapse

 

[xFrager]

#edit:
Konnte das Problem nun lösen, dass alle auf sind. Doch leider klappt nun der letzt nicht zu, wenn man den Obersten öffnet.

http://zevionhd.bplaced.net/

 

[Tronjer]

Was ich auf Anhieb sehe ist, dass alle Akkordeon-Elemente die selbe ID tragen, außerdem sind das keine Artikel.

Wenn du das Akkordeon-Plugin verwendest, musst du die Struktur auch so nachbauen, wie das auf der Bootstrap-Seite steht.

 

[xFrager]

omg...

So ein blöder Denkfehler...
Danke für den Hinweis, da habe ich doch tatsächlich das while 2 Zeilen zu früh gestartet.. Nun klappt es :)