Accordion

[joey102030]

A search didn't bring up any useful results.

Anyone know of any modules which can output a tree as a javascript accordion?

[kongondo]

Markup Simple Navigation: http://mods.pw/u

[Ivan Gretsky]

Hey joey102030! I think kongondo's advice is necessity but not sufficiency to achieve what you need. You should add some js/jquery pligin on top of that wonderful module to make it work as accordion.

You download the js plugin and plug it in the template file like any js with <script>. Than customize the plugin and/or Markup Simple Navigation output options and you're done.

[renobird]

As a side note (and to plug my own module), If you just need blocks of text collapsed into an accordion, you can do that with a single textarea and the TextformatterAccordion module.

[joey102030]

Thanks for the replies, and thanks renobird, that's exactly what I want, except I want to be able to pass a selector instead of a text field

[renobird]

I have a local version that does that. Let me see if I can get it cleaned up enough to send you.

[joey102030]

That would be excellent, thanks very much!

[renobird]

The module I have is too complicated to take apart right now. I have a lot of stuff going on that is specific to my local needs.

The easiest way to handle this is to put this in a template.

 

<?php $items = $pages->find('your_selector');?>

<dl class="accordion">
<?php foreach ($items as $item):?> 
    <dt><a href="<?php echo $item->url;?>"><?php echo $item->title;?></a></dt>
    <dd><?php echo $item->body;?></dd>
<?php endforeach;?>
</dl>

Then include your own CSS/JS, or use the CSS/JS from my demo

If you need a nested accordion, then it's a little tricker, and would be easier with a recursive function. 

[renobird]

Here's a quick recursive version. Written in the browser and untested.

Should give you a solid place to start.

<?php 
function renderAccordion(pageArray $pages){
    $out = "<dl class='accordion'>";
    foreach ($pages as $page){
        $out .= "<dt><a href='$page->url'>$page->title</a></dt>";
        $out .= "<dd>";
        if ($page->numChildren){
            $out .= renderAccordion($page->children()); // go recursive
        } else
            $out .= $page->body;
        }
       $out .= "</dd>";
    }
    $out .= "</dl>";

    return $out;
}

$items = $pages->find("your_selector");
echo renderAccordion($items); 

This will just keep going. You could set it to accept a $levels argument that would stop it after a specified depth.

[kongondo]

$item->body, $item->title, $item->url should be $page->body, $page->title, $page->url, I think

[renobird]

Thanks. Corrected.