Question

I’m making a accordion-type content section using mootools. Here’s the HTML I’m working with:

<div class="content-add">
    <div class="item html 18" id="dditem_26">
        <a id="ddlink_26"></a>
        <a href="#" class="open ddheader"><strong>F. Tony Hosseini</strong></a>
        <p>F. Tony Hosseini is the Founder and Chairman of the FTH Group of companies.  He has over 30 years of experience in international business development, finance and private syndication work, developing and syndicating over $500 million dollars of industrial, commercial and residential projects around the world.</p>
        <p>Before coming to the United States, Tony lived in Iran (Persia) where he served as the project Quality Control officer for National Construction Company, developing the natural gas line between Iran and the USSR. He was also a General Partner for Iran-America Insurance Company, a multi-line insurance operation in the southern region of Iran.</p>
    </div>
    <div class="item html 19" id="dditem_25">
        <a id="ddlink_25"></a>
        <a href="#" class="open ddheader"><strong>Robert J. O'Leary</strong></a>
        <p>Robert J. (Bob) O'Leary is Vice Chairman of the FTH Group of companies.  He also serves as a partner at Insignia Building, LLC, a leading construction company operating in high-end residential communities in the Carolinas.  Bob brings with him over 30 years to the field of corporate public affairs, including communications, government affairs and brand management.</p>
        <p>A native of Pennsylvania, Bob is a graduate of Penn State University, where he was named an Alumni Fellow.  He serves on the Board of Visitors of the university's College of Communications, the college's campaign development committee, and regularly guest lectures and mentors students at the university.  He resides in Greenville, South Carolina.</p>            
    </div>
</div>

The goal is to make all the content under each <a> with a class of ‘open’ slide out or in (toggle) whenever a.open is clicked. Here’s the mootools JS I have thus far:

$$('#content a.open').each(function(_link,i){
    var _slide = _link.getNext('div.slide');
    _slide.fx = new Fx.Slide(_slide).hide();
    _link.addEvent('click', function(){
        _link.toggleClass('open-slide');
        _slide.getParent('.contentcol').getElements('.slide').each(function(slide) {
            slide.slide('out');
        });
    _slide.fx.toggle();
});

The slider “works” as expected, except most of the time, the slides are extremely choppy and “flashy”, as in during the slide, the content will randomly disappear and re-appear quickly. For an example of this, see http://fthgroup.blueinkcms.com/about_us/leadership_team# and click one of the names.

Any ideas what I could be doing wrong?

Answer 1

the code you posted does not match your site’s mark-up. you should also upgrade to mootools 1.2.4 if possible.

anyway, troubleshooting this and Fx.Slide for poor performance issues (through your site’s source files) would probably have taken much longer than writing it from scratch.

http://www.jsfiddle.net/P9zJa/ -> this works fine, re-factored to use a class, I hope it gives you some ideas. with little or no alteration to the html it enhances but note I wrapped the p‘s into a div.content