Point me in the right direction - expand a category from a query

I've *finally* gotten my main client to upgrade to CF8. So, up until this point, I've not really had time to dive into it too deep and am just learning my way around the new stuff. Ok, I've got an admin page with a number of records sorted by categories set up like this (cfouput with "group") GROUP 1     Item A - [edit][delete][preview]     Item B - [edit][delete][preview]     Item C - [edit][delete][preview] GROUP 2     Item A - [edit][delete][preview]     Item B - [edit][delete][preview] ...... Blah, blah... What's the best way to collapse the sub items so when you first visit the page you just see the groups - click a group and it expands to show the categories with edit buttons and such underneath. I know there's a dozen CSS or javascript ways to do it. Is there anything in CF8 built in that would make it easier. Looks like cftree would be close maybe? If not, no problem. I just go back to my other methods.

I'd do it with jQuery. Here's a sample if you're using tables: <style type="text/css">   table, tr, td {     border-collapse: collapse;     border: solid 1px #ccc;     padding: 5px;   }   .group {     cursor: pointer;   }   .item {     display: none;   } </style> <script type="text/javascript" src="/scripts/jquery-1.2.6.min.js"></script> <script type="text/javascript">   $(function() {        $(".group").click(function() {       var groupID = getID(this.id);       var items = $(".group-" + groupID);       items.toggle();     });      });      function getID(input) {     return input.split("-")[1];   } </script> <table>   <tr><td colspan="2" class="group" id="group-1">GROUP 1</td></tr>   <tr class="item group-1">     <td>Item A</td>     <td>[edit][delete][preview]</td>   </tr>   <tr class="item group-1">     <td>Item B</td>     <td>[edit][delete][preview]</td>   </tr>   <tr class="item group-1">     <td>Item C</td>     <td>[edit][delete][preview]</td>   </tr>   <tr><td colspan="2" class="group" id="group-2">GROUP 2</td></tr>   <tr class="item group-2">     <td>Item A</td>     <td>[edit][delete][preview]</td>   </tr>   <tr class="item group-2">     <td>Item B</td>     <td>[edit][delete][preview]</td>   </tr> </table> ----- Excess quoted text cut - see Original Post for more -----

Adrian Lynch wrote: > I'd do it with jQuery. Here's a sample if you're using tables: Oooo - that works a charm! Jezz, why haven't I been doing this before!!! Thanks!!!

You wouldn't be the first person to have said that, nor the last! jQuery is awesome! Adrian ----- Excess quoted text cut - see Original Post for more -----

Or a simpler example with no extra classes or IDs, just targeting of the elements: <style type="text/css">   h3 {     cursor: pointer;   }   div div {     border: solid 1px #ccc;     padding: 3px;     display: none;   } </style> <script type="text/javascript" src="/shared/scripts/jquery-1.2.6.min.js"></script> <script type="text/javascript">   $(function() {        $("h3").click(function() {       $(this).siblings("div").toggle();     });      }); </script> <div>   <h3>GROUP 1</h3>   <div>Item A [edit][delete][preview]</div>   <div>Item B [edit][delete][preview]</div>   <div>Item C [edit][delete][preview]</div> </div> <div>   <h3>GROUP 2</h3>   <div>Item A [edit][delete][preview]</div>   <div>Item B [edit][delete][preview]</div> </div> Adrian Building a database of ColdFusion errors at http://cferror.org/ ----- Excess quoted text cut - see Original Post for more -----

Yeh, I'm with Adrian, though whatever js library you're most familiar with will do. If there is a CF tag for doing this it would either be outputting some javascript or a generating flash which, while good for quick solutions, doesn't really fit into a long-term client-side way of coding in my opinion; there simply isn't the completeness or flexibility that is offered from the various js libraries. Also, as Adrian demonstrated; with a working knowledge of any of the libraries, not using CF for such things is really just as quick and simple. Truly seperating display logic and business logic, added with crossing the js noob / js journeyman border is quite a light-bulb moment I think. My tuppence, Dominic

The easiest library I have found to accomplish this is HTMLXtree. They have a good set of other widgets (tabs, editors etc) but the tree view is excellent.  You can set it to output only the trunk nodes and query later for the leaves as a user opens the folder.  It also allows for custom graphics and includes a folder metaphor and character listing (+/_ graphics). There is a free version that doesn't handle XML output or a paid version that does.  There is a slight learning curve but overall very powerful and easy to use.  Support is excellent as well.  Just post your questions and within a day someone will answer. --S   ^ On Thu, Jan 8, 2009 at 6:21 PM, Dominic Watson <watson.dominic@googlemail.com> wrote: ----- Excess quoted text cut - see Original Post for more -----