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.