Forums

Board index » YUI 3 Gallery Forums: » Gallery Forums » Accordion

Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view

alexlebek

  • Joined: Fri Nov 13, 2009 1:47 am
  • Posts: 67
  • Offline
  • Profile

Forcing an item to expand

Post Posted: Thu Jan 14, 2010 3:42 am
+0-
Hi,
Thanks for a great module!
I'm having difficulty seeing how to make an item expand in response to a click elsewhere in the app. I thought (wrongly) I should do something like':

Y.on('click', function(e) {
item = Y.one('#item1');
item.addClass('yui-accordion-item-expanded');
item.set('expanded', true);
}, '#Action1');

How should this be achieved? Thanks.

Alex

Iliyan Peychev

YUI Contributor

  • Username: peychevi
  • Joined: Tue Feb 24, 2009 12:38 pm
  • Posts: 136
  • Location: Varna, Bulgaria
  • Twitter: ipeychev
  • GitHub: ipeychev
  • Gists: ipeychev
  • Offline
  • Profile
Tags:

Re: Forcing an item to expand

Post Posted: Thu Jan 14, 2010 10:06 am
+0-
alexlebek wrote:
Hi,
Thanks for a great module!
I'm having difficulty seeing how to make an item expand in response to a click elsewhere in the app. I thought (wrongly) I should do something like':

Y.on('click', function(e) {
item = Y.one('#item1');
item.addClass('yui-accordion-item-expanded');
item.set('expanded', true);
}, '#Action1');

How should this be achieved? Thanks.

Alex


In your code, item variable is Y.Node instance of element with id=item1, not AccordionItem instance. That's why your code does not work.
You have to do the following:
1. Get AccordionItem instance (if you don't have it already) by using Accordion's 'getItem' function. You can get an item by index, or by id.
2. Once you have the corresponding item, set its 'expanded' property to true:
item.set('expanded', true);
Moreover, there is no need to set 'yui-accordion-item-expanded' class explicitly, Accordion will do this for you.

Iliyan

alexlebek

  • Joined: Fri Nov 13, 2009 1:47 am
  • Posts: 67
  • Offline
  • Profile

Re: Forcing an item to expand

Post Posted: Fri Jan 15, 2010 12:51 am
+0-
Thanks! Works great.
Alex

Huey Brantley

  • Username: hpbrantley
  • Joined: Fri Feb 05, 2010 6:56 am
  • Posts: 22
  • Offline
  • Profile

Re: Forcing an item to expand

Post Posted: Thu Feb 11, 2010 12:28 pm
+0-
I have a similar question as this. I'm dynamically adding bodyContent on expand. I have this working except no content is shown until you click it to collapse, then click to expand again. The the new content will be shown.

I'm doing it like:

Code:
    function itemClickCallback ( id, o, args ) {
      Y.log("itemClickCallback called");
      var response = Y.JSON.parse(o.responseText);
      var args = args;
      args[0].item.set( "bodyContent", "<div>"+ response[0].TEST_DESC + "</div>" );
      args[0].item.set( "expanded", true );
      Y.detach('io:complete', itemClickCallback);
    }


So, how can I show the new content after it's been added?

BTW, Thank you so much for this tool.

Iliyan Peychev

YUI Contributor

  • Username: peychevi
  • Joined: Tue Feb 24, 2009 12:38 pm
  • Posts: 136
  • Location: Varna, Bulgaria
  • Twitter: ipeychev
  • GitHub: ipeychev
  • Gists: ipeychev
  • Offline
  • Profile
Tags:

Re: Forcing an item to expand

Post Posted: Thu Feb 11, 2010 10:17 pm
+0-
hpbrantley wrote:
I have a similar question as this. I'm dynamically adding bodyContent on expand. I have this working except no content is shown until you click it to collapse, then click to expand again. The the new content will be shown.

I'm doing it like:

Code:
    function itemClickCallback ( id, o, args ) {
      Y.log("itemClickCallback called");
      var response = Y.JSON.parse(o.responseText);
      var args = args;
      args[0].item.set( "bodyContent", "<div>"+ response[0].TEST_DESC + "</div>" );
      args[0].item.set( "expanded", true );
      Y.detach('io:complete', itemClickCallback);
    }


So, how can I show the new content after it's been added?


As I see, you set server response to item and then forcing it to expand. This should work properly, so can you post reproducible code? Also, is that issue related to specific browser and do you use strict mode? What value have you set to contentHeight property of this item?

BTW, do you know how long is server response? I suppose you don't, so if I were you, I would set "stretch" method to contentHeight property, instead "auto". In case of stretch and fixed mode, there is no need to wrap text in <div> element.

Iliyan

Huey Brantley

  • Username: hpbrantley
  • Joined: Fri Feb 05, 2010 6:56 am
  • Posts: 22
  • Offline
  • Profile
Tags:

Re: Forcing an item to expand

Post Posted: Tue Feb 16, 2010 6:07 am
+0-
I've changed the code up a bit. I aliased columns in my db to make it more generic so the js code can reference things such as ACCORDION_TITLE and ACCORDION_BODY.

Here's what I'm working with at the moment. As far as response time, no, I haven't profiled it. I'm running it from localhost on my laptop with apache/php and mysql. In order for me to get it expand at all I had to force it close then reopen it.


Code: http://pastebin.com/m79b5f798

Iliyan Peychev

YUI Contributor

  • Username: peychevi
  • Joined: Tue Feb 24, 2009 12:38 pm
  • Posts: 136
  • Location: Varna, Bulgaria
  • Twitter: ipeychev
  • GitHub: ipeychev
  • Gists: ipeychev
  • Offline
  • Profile
Tags:

Re: Forcing an item to expand

Post Posted: Fri Feb 19, 2010 6:20 am
+0-
hpbrantley wrote:
I've changed the code up a bit. I aliased columns in my db to make it more generic so the js code can reference things such as ACCORDION_TITLE and ACCORDION_BODY.

Here's what I'm working with at the moment. As far as response time, no, I haven't profiled it. I'm running it from localhost on my laptop with apache/php and mysql. In order for me to get it expand at all I had to force it close then reopen it.


Code: http://pastebin.com/m79b5f798


Actually, you are trying to load content dynamically, which is not supported right now, but I am going to implement it. Please, take a look here.
Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group