mootools Fx.Slide toggle on hidden element dont't work

Question

I'am loading some html with a request and use it as a template for all other items.

My code is:

itemDummy.destroy()

this.content.each(function(task) {
    //
    //more code
    //
    item = itemDummy.clone();

    detailBox = item.getElement('.descriptionBox');

    detailBox.id = "description" + task.id;
    //detailBox.toggle ()
    //open it on click
    item.addEvent("click", function() {
        new Fx.Slide("description" + task.id).toggle();
    });

    //
    //more code
    //
    detailBox.inject(itemWrapper);
    item.inject(wrapper);
});

If the line detailBox.toggle () is activated, my box doesn't show, but the Fx animation dont' work (the box never appears visible). But when I set s this line commented the detailBox is shown and the toggle animation is working, but I want a hidden box at the beginning.

But when I set this line as a comment, the detailBox is displayed and the toggle animation is working, but I want the Box invisible to start with

Answer 1

Following Johan comment it works after the inject:

detailBoxIds.each(function (id) {
    new Fx.Slide(id).hide();

    //instead of $$(id).hide () or $$(id).toggle () 
    //a direct toogle/hide hides the element, but the Fx.Slide can't open it again
})

$$('.taksItemWraper').addEvent ("click", function () {
    var id = this.getElement('.descriptionBox').id;

    new Fx.Slide(id, { 
        duration:300
    }).toggle();
})