Showing & Hiding - Right Hand AccordionContainer

[GaneshSolai_Sambandam]

Hi Guys
Can anyone hlep me on this.
I have Webmap application with design layouts split into 5 sections, top, bottom, centre, left and right.
The left and right sections - AccordionContinaer with diji.layout.contentpane.
Center section - where map sits on the application.

What I wanted to do now is when the application loads, my right section AccordionContainer shouldn't be visible, it should only show an icon, where an user can click that icon and makes the right Accordioncontainer and associated contentpanes visible.

I think, some of you have done this before.

Can anyone point me to right examples or codes or links please.

regards
Ganesh

[JianHuang]

There are many ways to implement slide in/out effect. Here is a simple code using dojo/_base/fx.

    var slide = function (rightDomId, open, map) {
      var width = window.innerWidth;
      var sliderWidth = open ? 250 : 0;
      var mapWidth = open ? width - 250 : width;
      fx.animateProperty({
        node: rightDomId,
        properties: {
          width: sliderWidth
        },
        onEnd: function () {
          var slider = dom.byId(rightDomId);
          var visible;
          if (parseInt(slider.style.width) < 100) {
            visible = "none";
          } else {
            visible = "block";
          }
          domStyle.set(slider, {
            display: visible
          });
        }
      }).play();
      fx.animateProperty({
        node: map.id,
        properties: {
          width: mapWidth
        },
        onEnd: function () {
          map.resize();
        }
      }).play();
    };

    var slideIn = function (rightDomId, map) {
      slide(rightDomId, true, map);
    };

    var slideOut = function (rightDomId, map) {
      slide(rightDomId, false, map);
    };

[JonathanUihlein]

The Lee Council has created a toggle button with click event and which slides in & out the accordion container. Have you checked the sample web application link. Are they using expandopane method. I don't think so.

Did you also check the sample? They are using dojo.animateProperty()

Like Jian said, there are many many ways to accomplish what you desire.
The choice really comes down to you making your own decision based on your immediate needs.
As a developer, the best thing you can do is outline the needs/wants/requirements of a project before starting to code.

[GaneshSolai_Sambandam]

Did you also check the sample? They are using dojo.animateProperty()

Like Jian said, there are many many ways to accomplish what you desire.
The choice really comes down to you making your own decision based on your immediate needs.
As a developer, the best thing you can do is outline the needs/wants/requirements of a project before starting to code.

Hello everyone (Jacob, Jeff, Jian, John)

thanks for your help and it is exactly what I wanted to implement in my  application. Expandopane work perfectly fine.
I agree with Jon comments on taking a decision based on immediate needs.
Anyway, without your feedbacks it wouldn't be possible for me implement swiftly.
Thanks once again.

Regards
Ganesh