For an "our people" section on one site, I’m using Ditto [[Ditto? &parents=`45` &tpl=`listPeople` &display=`all`]] with an extra snippet
[[setPeopleJs]]
... blah blah...
<div id="people">
<h3>Translators</h3>
<div id="translators">
[[Ditto? &parents=`45` &tpl=`listPeople` &display=`all`]]
</div>
<h3>Administrative Staff</h3>
<div id="administrators">
[[Ditto? &parents=`46` &tpl=`listPeople` &display=`all`]]
</div>
</div>
The "listPeople chunk:
<div class="name">[+pagetitle+]</div>
<div class="bio">[+content+]</div>
The setPeopleJs snippet is just to add the js to the page:
<?php
$src = "assets/js/mootools1.11.js";
$modx->regClientStartupScript($src);
$src = "assets/js/people.js";
$modx->regClientScript($src);
?>
And the mootools-based accordion:
window.addEvent('domready', function(){
var accordion = new Accordion('div.name', 'div.bio', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
element.setStyle('display', 'block');
},
alwaysHide: true,
display: 'all-closed',
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
toggler.setStyle('font-weight', 'normal');
}
}, $('people'));
});
This gives me two lists, one for "regular" employees and one for "administrators". The container opens nicely in the space to the left of the lists, with an image and bio text.
/********** Lists **********/
#people, #content {
position: relative;
}
div.name {
width: 250px;
margin-left: 20px;
cursor: hand;
cursor: pointer;
color: #222;
}
div.bio {
position: absolute;
display:none;
font-size: 0.8em;
padding: 5px;
top: 15px;
right: 80px;
background-image: url(images/wrapper_bg.jpg);
text-align: justify;
width: 300px;
}
div#trans div.bio {
top: 100px;
}
div.bio img {
float: left;
margin-right: 5px;
padding: 2px;
border: 1px solid #909090;
}
☆ A M B ☆
