Creating A Javascript/JQuery Accordion for Repeating Fields

[rosieate]

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> ";
}?>
</section>

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. 

[diogo]

Hi rosieate, welcome to the forum!

Try this with jQuery:

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

$('.bio h2').click(function(){
  $(this).siblings().toggle();
});

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.

[onjegolders]

Your closing </section> is also outside of the loop and should be moved inside.

[rosieate]

Thanks for your help, guys! I changed the section tag to an article, moved the tags inside the loop, and added your code, diogo, and it's working beautifully.

Thank you again!