首个手风琴面板打开

Question

I can't seem to work out how to get my first accordion panel to open automatically. Problem is, I can't set it to active as it is displaying data with PHP from a database so if I set the div to "active-panel" it applies it to all the panels. Any help would be great! Just to clarify, I'm just trying to get the first one to open automatically. Code:

$('.panel-holder').click(function () {
        $(this).closest('.accordion').find('.panel-holder').removeClass('active-panel');
        $(this).addClass('active-panel');

PHP

echo "<div class='panel-holder'>

    <div class='panel-title'>". $results['job_title'] ."
        <i class='icon arrow_carrot-down'></i>
    </div>

    <div class='panel-content'>
        <p class='lead'>". $results['job_summary'] ."</p>
        <p>". $results['job_description'] ."</p>
    </div>

    </div><!--end of individual accordian panel-->";

Answer 1

Just add the "active-panel" class to the first item in PHP only. Are those generated in a loop? Just create a counter variable that increases in every run of the loop. If this counter == 1 (or 0 if you want to start with 0 ;) ) add the css class to your markup.

Answer 2

Ended up creating the following solution:

$('.panel-holder').each(function () {
        $(this).closest('.accordion').find('.panel-holder:first').addClass('active-panel');

    });