I am generating a dynamic nested accordion with unique client ids. Let's say a user needs to do a modification on accordeon 3, he opens the specific accordion and click on the button "modify". The user is then transported to a new form on a new page to do his modification.
After validating his modification, the user needs to return to the previous page with the listed accordion and have only the specific accordion he selected earlier open. Can somebody please assist me?
Here is my code:
<div id="accordionbox">
<?php
if (isset($listeClient) && count($listeClient) > 0) {
?>
<?php
$iClients = 0;
while ($iClients < count($listeClient)) {
$CLIENT_ID = $listeClient[$iClients]['CLIENT_ID'] == "" ? "" : $listeClient[$iClients]['CLIENT_ID'];
$nom = $listeClient[$iClients]['CLIENT_NOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_NOM'];
$prenom = $listeClient[$iClients]['CLIENT_PRENOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_PRENOM'];
$projet[] = $listeClient[$iClients]['projet'];
?>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true">
<div id="headingClient<?php echo $iClients; ?>" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-<?php echo $CLIENT_ID; ?>" aria-expanded="false"
href="#collapseMain-<?php echo $CLIENT_ID; ?>" data-toggle="collapse">
<span class="panel-title"><?php echo $nom . ' ' . $prenom; ?></span>
</a>
<div id="collapseMain-<?php echo $CLIENT_ID; ?>" class="panel-collapse collapse"
aria-labelledby="heading<?php echo $CLIENT_ID; ?>" aria-expanded="false">
<div class="panel-body">
<div id="accordionInside-<?php echo $CLIENT_ID; ?>" class="panel-group"
aria-multiselectable="true" role="tablist">
<!-- Informations Personnelles -->
<div class="panel panel-default">
<a id="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Informations Personnelles</span>
</a>
<div id="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Personelle
</div>
</div>
</div> <!-- Fin Informations Personnelles -->
<!-- Contracts -->
<div class="panel panel-default">
<a id="headingContract-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab2"
aria-controls="collapseContract-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapseContract-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Dossiers</span>
</a>
<div id="collapseContract-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingContract-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
<div id="accordionContractBody-<?php echo $CLIENT_ID; ?>"
class="panel-group" aria-multiselectable="true"
role="tablist">
<?php
$iProjets = 0;
while ($iProjets < count($projet[$iClients]['projetz'])) {
$PROJET_ID = $projet[$iClients]['projetz'][$iProjets]['PROJET_ID'];
?>
<div id="accordionContract-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-group rapprocher"
aria-multiselectable="true" role="tablist">
<div class="panel panel-default">
<a id="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapse-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
aria-expanded="false"
href="#collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title"><?php echo $projet[$iClients]['projetz'][$iProjets]['PROJET_NOM']; ?></span>
</a>
</div>
<div id="collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Contracts
</div>
</div>
</div>
<?php
$iProjets++;
}
?>
</div>
</div>
</div>
</div> <!-- Fin Contracts -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$iClients++;
}
?>
<?php
}
?>
</div>
And here is what i have been trying:
<?php
if (isset($client_id) && $client_id <> "") {
?>
<script>
$(document).ready(function () {
//open all div starting with collapseMain
$("div[id^='collapseMain']").addClass("in");
//open all div starting with collapsePersonnelle
$("div[id^='collapsePersonnelle']").addClass("in");
//open all div starting with collapseContract
$("div[id^='collapseContract']").addClass("in");
//open all div starting with collapseProjet
$("div[id^='collapseProjet']").addClass("in");
//how to open only the specific accordion with the client id
});
</script>
<?php
}
?>
We can see that you have added unique id to all your ".panel-collapse" divs as id="collapseMain-<?php echo $CLIENT_ID; ?>". We also know that you have the id for which you want to open the accordion.
You can use jquery selector $("#collapseMain-<?php echo $client_id; ?>") to select only the accordion that should be opened.
Lets assume the html code generated by php is:
<div id="accordionbox">
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-1" class="panel-group" aria-multiselectable="true">
<div id="headingClient-1" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-1>" aria-expanded="false"
href="#collapseMain-1" data-toggle="collapse"><span class="panel-title">Client 1</span></a>
<div id="collapseMain-1" class="panel-collapse collapse"
aria-labelledby="heading1" aria-expanded="false">
<div class="panel-body">
Content 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-2" class="panel-group" aria-multiselectable="true">
<div id="headingClient-2" class="panel">
<a class="panel-heading collapsed" title="Tab2"
aria-controls="collapseMain-2>" aria-expanded="false"
href="#collapseMain-2" data-toggle="collapse"><span class="panel-title">Client 2</span></a>
<div id="collapseMain-2" class="panel-collapse collapse"
aria-labelledby="heading2" aria-expanded="false">
<div class="panel-body">
Content 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-3" class="panel-group" aria-multiselectable="true">
<div id="headingClient-3" class="panel">
<a class="panel-heading collapsed" title="Tab3"
aria-controls="collapseMain-3>" aria-expanded="false"
href="#collapseMain-3" data-toggle="collapse"><span class="panel-title">Client 3</span></a>
<div id="collapseMain-3" class="panel-collapse collapse"
aria-labelledby="heading3" aria-expanded="false">
<div class="panel-body">
Content 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then you can generate javascript code using php like
<?php
if (isset($client_id) && $client_id <> "") {
?>
$(document).ready(function() {
$("#collapseMain-<?php echo $client_id; ?>").addClass("in");
});
<?php } ?>
You can have a look at this jsfiddle