Navigation
You are here: Home Things we build Code snippets Using plone's All Content view to create an accordion with jQuery

Using plone's All Content view to create an accordion with jQuery

Posted by Karel Calitz |

Plone's 'All Content' view (in Plone 4) is such a great way of displaying large amounts of content, but still keeping it organised. Added to that, jQuery accordion makes it even neater, as you don't have to display everything immediately.

View our implementation of this solution here.

The problem

The structure of the All Content template doesn't allow me to use the standard jQuery accordion code.

jQuery needs this:

<div id="content-core">
    <h2 class="headline">
    <div class="item">
        <dl>Body stuff</dl>
    </div>
    <h2 class="headline">
    <div class="item">
        <dl>Body stuff</dl>
    </div>
</div>

And I'm stuck with this:

<div id="content-core">
    <div class="item">
        <h2 class="headline">
        <dl>Body stuff</dl>
    </div>
    <div class="item">
        <h2 class="headline">
        <dl>Body stuff</dl>
    </div>
</div>

The accordion needs it in order of title, body, title, body, etc.

The solution

Use js to identify the item to be used as the title of the accordion tab (<h2>), remove it from the wrapping item (<div class="item">), and place it in front of said wrapping item. This will give us the structure we need.

The js we used

<script type="text/javascript" language="javascript">
    jQuery(function($) {
        $("body.template-folder_full_view .item h2").each(function(){
            $(this).parent().before($(this));
        });
    });
</script>

You can get more info on the jQuery accordion here.

Sep 18, 2015 11:20 AM
Find out how Juizi can help your business