I am trying to get my subfolders to show below their parent folders accordion style. I can't seem to get the sub-folders to display under the parent folders. Here is the code I am currently using:

Code: Select all

<cms:folders masterpage='blog.php' include_subfolders='1' >
    <div class="widget">
       <div class="accordion-button"><a href="cms:show k_folder_link />"><cms:show k_folder_title /></a></div>
                <div class="accordion-content">
          <a href="cms:show k_folder_link />"><cms:show k_total_children /></a></div>
                 
    </div> 
</cms:folders>

[KK]

Hi,

Please post in your original HTML markup for the accordian without any Couch tags added yet.

Thanks.

<!-- Accordion -->
<div class="widget">
<h5>Accordion Widget</h5>
<div class="accordion-button first" id="open"><a href="">Website Design</a></div>
<div class="accordion-content">
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</div>
<div class="accordion-button"><a href="">Website Development</a></div>
<div class="accordion-content">
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</div>
<div class="accordion-button"><a href="">Content Management Systems</a></div>
<div class="accordion-content">
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</div>
<div class="accordion-button"><a href="">E-Commerce</a></div>
<div class="accordion-content">
Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</div>
</div>
<!-- Accordion -->

[KK]

Thank you.

The way accordians are structured, we can only show an hierarchy of folders that is two levels deep - the top level folders become the accordian 'buttons' (that trigger the showing and hiding of their respective content panels) and all the child folders of these go into the content panel.

To create this accordian we can use the cms:folders tag twice - once to display only the top folders and then for each such folder fetched we use the cms:folders tag once again to fetch its child folders.

Code: Select all

<!-- Accordion -->
<div class="widget">
   <h5>Accordion Widget</h5>
   
   <cms:folders masterpage='blog.php' hierarchical='1' depth='1'>
      <div class="accordion-button<cms:if first_button_done=''> first" id="open</cms:if>"><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></div>
      <div class="accordion-content">
         <cms:folders masterpage='blog.php' hierarchical='1' childof=k_folder_name >
            <a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a> (<cms:show k_folder_pagecount />)<br />
         </cms:folders>
      </div>
      <cms:set first_button_done = '1' />
   </cms:folders>

</div>
<!-- Accordion -->

The only complexity above is the way we handle the very first button to give it a unique class and id by setting a custom variable 'first_button_done'.

It is not clear from your original code what exactly you wish to display in the contents panel but for this example I am displaying the links and page counts of all subfolders.
You can modify it suit your needs.

Hope this helps.

Thank you so much! This worked perfectly and it makes a lot more sense now. Appreciate it.

[cheesypoof]

One downside of this is that you can't actually click on and visit the top-level folders through the sidebar. Unless all of your pages are placed in subfolders, this could be problematic. Should this code not take into account whether or not there are child folders? You could apply a different class that does not trigger the JavaScript and therefore make the links work. You could then style this new class (accordion-button-disabled) the same as accordion-button, but without the plus sign:

Code: Select all

<!-- Accordion -->
<div class="widget">
   <h5>Accordion Widget</h5>
   
   <cms:folders masterpage='blog.php' hierarchical='1' depth='1'>
      <div class="accordion-button<cms:if k_folder_totalchildren>-disabled</cms:if><cms:if first_button_done=''> first" id="open</cms:if>"><a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a></div>
      <div class="accordion-content">
         <cms:folders masterpage='blog.php' hierarchical='1' childof=k_folder_name >
            <a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a> (<cms:show k_folder_pagecount />)<br>
         </cms:folders>
      </div>
      <cms:set first_button_done = '1' />
   </cms:folders>

</div>
<!-- Accordion -->

I was just about to ask about that. When I plugged in the above code it took the plus sign away from folders that had sub folders below it and left the + sign icon on folders that did not have sub-folders, yet. Is there a way to allow the folder titles to be clickable and only the plus sign icon to drop down?

[cheesypoof]

Oops my mistake.

Code: Select all

<cms:if k_folder_totalchildren>-disabled</cms:if>

This should have been:

Code: Select all

<cms:if k_folder_totalchildren><cms:else/>-disabled</cms:if>

You definitely could do that, but the plus sign would have to be its own element, and not encompass the folder link. That would require some markup adjustment and style changes.