Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can do something like this.</p> <pre><code>$names = ['alex', 'adam', 'bob', 'bryan']; asort($names); // The list wasn't sorted, if you don't want sorting you can just remove this line. // Prepare list for accordion. $accordionData = []; foreach($names as $name) { $accordionData[substr($name, 0, 1)][] = $name; } // Print accordion, change the echoes to reflect your accordion html. foreach($accordionData as $index =&gt; $names) { echo strtoupper($index).'&lt;br /&gt;'; foreach($names as $name) { echo ucfirst($name).'&lt;br /&gt;'; // ucfirst changes the first letter to upper case. } } </code></pre> <p>output:</p> <pre><code>A Adam Alex B Bob Bryan </code></pre> <p>If your question included how to make the actual accordion, just try the code available here: <a href="http://jqueryui.com/accordion/" rel="nofollow">http://jqueryui.com/accordion/</a></p> <p>And here is a working example based on jquery ui</p> <pre><code>// You should replace this with your DB data. $names = ['alex', 'adam', 'bob', 'bryan']; // The list wasn't sorted, if you don't want sorting you can just remove this line. asort($names); // Prepare list for accordion. $accordionData = []; foreach($names as $name) { $accordionData[substr($name, 0, 1)][] = $name; } ?&gt; &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jQuery UI Accordion - Collapse content&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt; &lt;script&gt; $(function() { $( "#accordion" ).accordion({ collapsible: true, active: false }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="accordion"&gt; &lt;?php // Print accordion, change the echoes to reflect your accordion html. foreach($accordionData as $index =&gt; $names) { ?&gt; &lt;h3&gt;&lt;?php echo strtoupper($index); ?&gt;&lt;/h3&gt; &lt;div&gt; &lt;?php foreach($names as $name) { ?&gt; &lt;p&gt;&lt;?php echo ucfirst($name); ?&gt;&lt;/p&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;?php } ?&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload