Jump to content

Creating A Javascript/JQuery Accordion for Repeating Fields


Recommended Posts

Hello there -

So I'm migrating an existing yoga studio site that I built into ProcessWire. I created a template for the "teachers" page, which has teacher bios, that uses repeating fields for each teacher & wraps each one in a section tag: 

<?php foreach($page->Info_Block as $Info_Block) { ?>
	<section class="bio">
    <? echo "<h2>{$Info_Block->Name}</h2>";    
    echo "<div><img src='{$Info_Block->Image->eq(0)->url}'>";
    echo "<p>{$Info_Block->Information}</p></div> ";

I would like to make it so that only the teachers' names show, and then the bio section opens when the name is clicked, which I've done with CSS on the existing site: http://saniyoga.com/teachers.php.

But the pure CSS solution uses modified inputs, which doesn't seem like a viable solution here. I've tried adding the script for the JQuery UI accordion to the template in both its original form (the containing div for the above code is "dropdown_cont")

$(function() {
        $( ".dropdown_cont" ).accordion();

.... and with a modifier to take the section into account,

$(function() {
        $( ".dropdown_cont" ).accordion(
         { header: '> section.bio > h2' }

but it doesn't work. 

Still very new to ProcessWire so would appreciate any suggestions. 

Link to comment
Share on other sites

Hi rosieate, welcome to the forum!

Try this with jQuery:

$('.bio h2').siblings().hide();

$('.bio h2').click(function(){

I wrote this quicky in the browser, but should work.

You can also make them slide down and up by using slideToggle() instead of toggle()


Just a note: You are using <section> for an element that has a repetition. In html5 you should use <article> instead for such cases.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...