nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Showing &amp; 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

Encuentra más publicaciones etiquetadas con

Accepted answers

JeffJacobson

You might want to try the dojox/layout/ExpandoPane.

Jianxia_0-1743990983204.png

Jianxia_2-1743991509693.png

All comments

JakeSkinner

Hi Ganesh,

You can set the visibility of the AccordianContainer to 'hidden'. Ex:

<div dojoType="dijit.layout.AccordionContainer" id="accordion" style="visibility:hidden;">

You can then show the AccordianContainer when the user clicks on the icon/button. Ex:

require(["dojo/dom-style"], function(domStyle){
    domStyle.set("accordion", "visibility", "visible");
)};

GaneshSolai_Sambandam

Hi Jskinner
Thank you reply. But, I want to do some thing like this, as this shown on this sample link.

http://lee2.connectgis.com/Map.aspx

My right hand content pane should slide out and slide in when a user a click on the button as shown in this example.

Regards
Ganesh

JeffPace1

I do this when i get popup results

connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }

JeffPace1

Once you have the pane showing, you can also select a specific AccordianContainer or AccordianPane

registry.byId(settings.tabContainer).selectChild(settings.accordionContainer);
registry.byId(settings.accordionContainer).selectChild(settings.accordionPane);

GaneshSolai_Sambandam

I do this when i get popup results

connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }

hi Jeff
Not exactly sure, where to add this.
Can you show this in fiddler?

Thanks in advance.

JeffPace1

sorry, i thought you were looking for an event

if all you want to do is start with it closed, when you define the container

data-dojo-props="region:'right',title:'Results',startExpanded:false"

JeffJacobson

You might want to try the dojox/layout/ExpandoPane.

Jianxia_0-1743990983204.png

Jianxia_2-1743991509693.png

JeffPace1

Thats what I get for making assumptions.

Yes this all needs to be an expandopane, its exactly what you are looking for

  <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'left',title:'Widgets',startExpanded:false" id="leftPane">
                <div data-dojo-type="dijit/layout/TabContainer"  data-dojo-props="tabPosition:'top', tabStrip:'true'" id="leftTC" style="padding:0;width:290px;" >
                    <div data-dojo-type="dijit/layout/AccordionContainer" title="Data" id="dataTab">
                        <div data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title:'Live Layers',selected:'true'" id="liveLayerPane" style="padding:0;" >
                            <div id="tocDiv" style="padding: 0 5px 0;" ></div>
                        </div>

GaneshSolai_Sambandam

Thats what I get for making assumptions.

Yes this all needs to be an expandopane, its exactly what you are looking for

  <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'left',title:'Widgets',startExpanded:false" id="leftPane">
                <div data-dojo-type="dijit/layout/TabContainer"  data-dojo-props="tabPosition:'top', tabStrip:'true'" id="leftTC" style="padding:0;width:290px;" >
                    <div data-dojo-type="dijit/layout/AccordionContainer" title="Data" id="dataTab">
                        <div data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title:'Live Layers',selected:'true'" id="liveLayerPane" style="padding:0;" >
                            <div id="tocDiv" style="padding: 0 5px 0;" ></div>
                        </div>

Hi Jeff and Jacob
Thank you very much for your help. I haven't tried your expandopane code, will try and get back to you tomorrow.
In the meantime, I just wanted to ask, in the link

http://lee2.connectgis.com/Map.aspx

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.

I just want to do try like Lee city council method. But, if your expandopane codes work, I will use yours.

thanks very much in advance.

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.