Results 1 to 2 of 2

Thread: Please help me with accordion-like effect using ext core

  1. #1

    Default Please help me with accordion-like effect using ext core

    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:

    HTML Code:
    <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:

    Code:
    #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:

    Code:
    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:

    Code:
    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.

  2. #2

    Default

    OK, I got it. The FX config options were the key.

    Code:
    	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();	  
    		});

Similar Threads

  1. Accordion expand/collapse effect
    By Ekambos in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 13 Jul 2010, 2:15 AM
  2. Replies: 1
    Last Post: 11 Jun 2009, 11:36 PM
  3. Replies: 2
    Last Post: 11 Jun 2009, 7:04 PM
  4. Replies: 1
    Last Post: 21 Apr 2009, 8:00 AM
  5. Replies: 1
    Last Post: 21 Apr 2009, 8:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •