PDA

View Full Version : Please help me with accordion-like effect using ext core



the Dieter
20 Feb 2011, 9:41 AM
Hello anybody,
I am a total beginner, and I try to build an accordion-like function with ext core. I want to click a link, and then a "toggle-box" containing text of unknown amount (I don't know the height of this box!) shall slide out from top of this link downward, hiding it. This box contains a "close me" link on the bottom. When I click it, the box shall slide in again, making the "open" link visible again (so, it is a bit different from all these jquery accordion plugins).

I have content after the box, and this content shall move up or down, when the box sildes out/in.

My markup is:


<div id="content">

<div class="someTextBefore">
<p>Some text</p>
</div>

<div class="openContainer">
<a href="link" class="openLink">Click me to open the toggle box</a>
</div>

<div class="toggleBox">
<p>I am an unknown amount of text, so I don't know the height of the toogle box<p>

<div class="closeContainer">
<a href="link" class="closeLink">Click me to close the toggle box</a>
</div>
</div>

<div class="someTextAfter">
<p>Some more text</p>
</div>

</div>



and the relevant CSS:


#content, .openContainer, .toggleBox {
position: relative
}
.openContainer {
height: 30px
z-index: 10;
}
.toggleBox {
margin-top: -30px; /* you can try "top:0" - same result */
z-index: 20;
}


- - - - - - - - - - -

and my javascript that does not do what I really want:


Ext.onReady(function() {

var openLinkEl = Ext.select('.openLink');
var toggleBoxEl = Ext.select('.toggleBox');
var closeLinkEl = Ext.select('.closeLink');

openLinkEl.on('click', function(e,t) {
toggleBoxEl.slideIn('t', { duration: 1 });
e.stopEvent();
});

closeLinkEl.on('click', function(e,t) {
toggleBoxEl.slideOut('t', { duration: 1 });
e.stopEvent();
});

});


This does not what I want. The content that comes after the box ( <div class="someTextAfter"> ) moves up, when the box slides in, and then jumps back down again, leaving unwanted space. Thats because it uses "visibility: hidden" insteat of "display: none". So I changed the close function to:


closeLinkEl.on('click', function(e,t) {
toggleBoxEl.slideOut('t', { duration: 1 });
toggleBoxEl.setStyle({
display: 'none'
});
e.stopEvent();
});

But *display:'none'* does not work. The toggleBox vanishes during the slideIn animation, but when the animation is finished, <div class="someTextAfter"> jumps downward again, and there is no "display: none" on .toggleBox. Something like color:red does work.

Another problem: When the box is closed, and I click "open", it comes out *beneath* the link (the "openContainer"-div). Then, when the animation is finished, the box moves up and covers the openContainer (margin-top is -30px). Why?

I then thougt about using el.animate instead of slideIn/slideOut to change the height, but I don't know the target height when I open the box. I can't use el.getHeight (can I?), when the box is closed, because then, the height is 0, or whatever I have been setting it to when closing the box.

Soemething else I don't understand: After the first execution of the javascript, "toggleBox" is placed in the markup *beneath* the "someTextAfter" div. I guess ext core moves it there, but why? The crazy thing is: When the box is visible and I hover it in the source code of firebug, it seems to appear at the right place, above "someTextAfter". Eh??

My next challenges will be to start with a closed box instead an open one, make this work with multiple openContainer/toggleBox/closeContainers on the page, and then creating a single toggle-function insteat of two open/close functions, but right now I would be very happy if would find a way to make the effect worked correctly.

Would be very glad if anybody could give me hint about what I do wrong here. Thanks.

the Dieter
20 Feb 2011, 3:31 PM
OK, I got it. The FX config options were the key.


openLinkEl.on('click', function(e,t) {
// toggleBoxEl.setStyle({
// display: 'block'
// });
toggleBoxEl.slideIn('t', {
duration: 1,
useDisplay: true
});
e.stopEvent();
});

closeLinkEl.on('click', function(e,t) {
toggleBoxEl.slideOut('t', {
duration: 1,
useDisplay: true
});
e.stopEvent();
});