Thread

This question may be related to a resolved thread.

I found the above thread which helped with getting the accordion script to work, but only for static HTML content such as:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
<p>    <div>First content</div><br />
    </p><h3><a href="#">Second header</a></h3>
<p>    <div>Second content</div><br />
</div>

How can I apply this to the nested category list so that clicking on a parent category opens it’s child categories in the accordion? The EE display of categories generates the list in nested <ul>

{exp:channel:categories channel="news" style="nested" show_empty="no"}
  <h3><a href="http://{path=news/show}">{category_name}</a></h3>
<p> {/exp:channel:categories}

and <div>

<h3><a href="#">First header</a></h3>
<p>    <div>First content</div>

I haven’t been able to find a way to do this even though EE supports the jquery accordion script in the jquery module. I really need help with this.

Thank you!

I worked it out. It needs to have a style of ‘linear’ not ‘nested’. So for anyone else looking for this,  the HTML is:

<div id="accordion">
 {exp:channel:categories channel="news" style="linear" class="categories" show_empty="no"}
  <h3><a href="http://{path=news/show}">{category_name}</a></h3>
<p> {/exp:channel:categories}<br />
    </div>

.. and in the header you will need:

{exp:jquery:script_tag}
{exp:jquery:script_tag ui='accordion'}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  
 [removed]
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  [removed]

I’ve used the css linked from googleapis for testing but will probably set up custom css on the local server.

I replied to myself too quickly - the accordion layout is not displaying the category hierarchy correctly. It seems to be displaying them randomly. For instance, I have the following:

Parent One
  Child one
  Child two

Parent Two
  Child three
  Child four

My accordion is showing:

Parent One
  Child one
Child two
  Parent Two
Child three
  child four

It makes no sense. Does anyone know how to use the accordion menu with EE categories?

Anyone??

Could someone from Expression Engine please respond to my question?

Surely displaying categories and sub-categories in an accordion menu is a pretty fundamental requirement?  Any solution I’ve tried gets stymied by the restrictive way that EE handles the listing of categories. I’ve searched the documentation and these forums and this looks like a problem a lot of people come across and still there doesn’t appear to be an adequate solution.

I am new to EE and up until now I’ve been very happy with the way it works. Now the first thing I’m really stuck on and need help with gets ignored.  This is disappointing.

Hey Dotwebs,

Sure, we’re here to help! Just so you’re aware, we do our best to respond within one business day. Don’t worry, no one forgot about you!

Could you take a look at the HTML output of the Channel Categories tag itself, not what’s rendered in the browser after the jQuery is applied? With linear styling of the categories, it just outputs each category without any styling or anything. I think the problem is that jQuery’s accordion plugin is not seeing markup that it can make sense of since the HTML doesn’t denote any kind of category hierarchy.

Instead, I’d recommend outputting categories with a nested style, as seen here, and setting the jQuery plugin’s options so that it’s looking for the right selectors. Does that make sense?

Hi Kevin,

Thanks for coming back to me and apologies for my impatience. I had to leave this and work on something else, you know how it is, when you spend time on one thing everything else backs up! 

Your suggested solution does make sense. I had tried using the nested style and it created the accordion but with the categories all mixed up. The only thing I didn’t try was to set the jQuery options to look for the right selectors. I will try that now and let you know how it goes.

Dotwebs

Hey Dotwebs,

No worries! We are here to help, and I can empathize with your frustration.

We’ll keep this open and please report back after your trial run.

Cheers,