jquery accordion在数据库搜索结果上无法正常工作

Question

I want to load information from data base and show them as accordion.in my case accordian is working only for first set of data retrieves from the database but accordion functionality is not applied for the rest of the data.i'm new to this feature and i added simple accordion function.

$(function() {
$( "#accordion" ).accordion({
    collapsible: true,
       heightStyle: "content"
   });
});

this is the part of php codeigniter code

echo '<div class="fieldinfio"><h4>BRANCHES</h4></div>';
echo '<a href="'.base_url().'customers/companies/addbranch/'.$company_details->id.'" class="btn_link"><span class="view_btn">Add Branch</span></a>';
echo '<div id="branches">';
foreach ($branch_details as $branch) {

    echo'<h3>'.$branch->branch_name.'</h3>';

    echo '<div id="accordion">';
    echo '<h3>Branch Information</h3>';
    echo '<div>';
    echo '<p>';
    echo '<table class="datatable">';
    echo '<tr><td width="200">Branch Name: </td>';
    echo '<td>'.$branch->branch_name.'</td></tr>';
    echo '<tr><td width="200">Account Type: </td>';
    echo '<td>'.$branch->account_type.'</td></tr>';
    echo '<tr><td width="200">Postcode: </td>';
    echo '<td>'.$branch->postcode.'</td></tr></table>';
    echo '</p>';
    echo '</div>';

    echo '<h3>Default Price</h3>';
    echo '<div>';
    echo '<p>';
    if($default_price[$branch->id]) {

    } else {
        echo '<p>Not Set</p>';
    }
    echo '</p>';
    echo '</div>';

    echo '<h3>Training Locations</h3>';
    echo '<div>';
    echo '<p>';
    echo '<a href="'.base_url().'customers/companies/addlocation/'.$company_details->id.'/'.$branch->id.'" class="btn_link"><span class="view_btn">Add Training Location</span></a>';
    foreach ($location_details[$branch->id] as $location) {
        echo '<span>'.$location->name.'</span>';
        echo '<table class="datatable">';
        echo '<tr><td width="200">Name: </td>';
        echo '<td>'.$location->name.'</td></tr>';
        echo '<tr><td width="200">Postcode: </td>';
        echo '<td>'.$location->postcode.'</td></tr></table>';
    }
    echo '</p>';
    echo '</div>';
    echo '</div>';
}
echo '</div>'; 

Answer 1

It looks like the branch information is inside a loop, which will create multiple elements with the id accordion.

ID of an element must be unique in a document, so in your case use class attribute instead like

echo '<div class="accordion">';
echo '<h3>Branch Information</h3>';

then

$(function () {
    $(".accordion").accordion({
        collapsible: true,
        heightStyle: "content"
    });
});