AnsweredAssumed Answered

Open first ContentPane in AccordionContainer

Question asked by ghilton on Jul 25, 2016
Latest reply on Jul 26, 2016 by ghilton

This is a follow up to a question I asked earlier today. I'm trying to open a Content Pane with an AccordionContainer and Content Panes which are not visible when the application opens; while making sure the first Content Pane in the Accordion Container is opened.  The answer for the question I asked earlier was answered correctly by Robert Scheitlin in this thread:


Using the answer as a guide I tried to work it into an application I have where I have code broken out into a separate load.js file and not in the entire html file.  I'm wondering if perhaps I need to have my modules listed in a different order for the code to automatically open the first ContentPane in an Accordion Container?  I think I have all of the required modules and in an appropriate order  My load.js file is listed below. 


I hope just attaching the load.js file and not the other associated js files will work, if not I can attach all of my other js files and html file. Any help is greatly appreciated


George Hilton




var map;

var selectionToolbar;

var dLayer;

var idlay;

var scalebar;

var parfill;

var popup;

var qbyidpt;

var navToolbar;

var infoTemplate;

var idTask;

var idParam;

var pFP;

var yn;

var store;

var sr;

var legend;

var legaccord;

var inviz;


































function (

  Map, Legend, GraphicsLayer, SpatialReference, Draw, Scalebar, Point, Graphic, SimpleFillSymbol, SimpleLineSymbol, Navigation, IdentifyTask, IdentifyParameters, Popup, domConstruct, Extent, InfoTemplate, ArcGISDynamicMapServiceLayer,

  FloatingPane, on, parser, arrayUtils, Color, registry

) {

    // call dojo parser




    // Full extent of map

    fullExtent = new esri.geometry.Extent({ "xmin": fullMinX, "ymin": fullMinY, "xmax": fullMaxX, "ymax": fullMaxY, "spatialReference": { "wkid": fullWKID } });





    //var initExtent = new esri.geometry.Extent({ "xmin": -8227830.3637063, "ymin": 5340700.39573648, "xmax": -8171280.30528049, "ymax": 5394550.12077208, "spatialReference": { "wkid": 102100 } });

    map = new Map("map", {

        basemap: "topo",

        //infoWindow: popup,

        //extent: initExtent,

        showAttribution: false,

        slider: false,

        logo: false,

        center: [-73.7164, 43.3724],

        zoom: 11








    map.on("update-start", showLoading);

    map.on("update-end", hideLoading);






    //scale = new scaleUtils.getScale(map);


    //var scale = scaleUtils.getScale(map);

    //var tscale = scale.toString();






    selectionToolbar = new Draw(map, {showTooltips: false});



    selectionToolbar.on("draw-end", addrectselToMap);



    scalebar = new Scalebar({

        map: map,

        scalebarStyle: "ruler",

        //scalebarUnit: "dual",

        attachTo: "bottom-left"










    parfill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

    new Color([255, 0, 0]), 1), new Color([255, 255, 100, 0.25])






    //define symbol for popup

    popup = new Popup({

        fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

            new Color([255, 0, 0]), 2), new Color([50, 50, 255, 0.25]))

    }, domConstruct.create("div"));









     sr = new SpatialReference(3857);




    // Empty Point for Qby Identify Function Info Window Box Location

    qbyidpt = new Point;






    infoTemplate = new InfoTemplate();

    infoTemplate.setTitle("Selected Parcel: ${NEWNUMBER}");

    infoTemplate.setContent("Parcel ID : ${NEWNUMBER}");



    idTask = new IdentifyTask("");

    idParam = new IdentifyParameters();

    idParam.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;

    idParam.tolerance = 1;

    idParam.layerIds = [3];

    idParam.width = map.width;

    idParam.height = map.height;

  //idParam.spatialReference =;

    idParam.returnGeometry = true;



    navToolbar = new Navigation(map);




    map.on("load", initOperationalLayer);

    map.on("layers-add-result", verifyLoadStatus);

    map.on("click", getMapPoint);

    map.on("mouse-move", showCoordinates);

    map.on("mouse-out", clearCoordinates);

    map.infoWindow.on("hide", hideidwin);







    function initOperationalLayer() {



        // Hook up jQuery




        //add QBY Map Service

        dLayer = new ArcGISDynamicMapServiceLayer("");


  //add empty Graphics Layer

        idlay = new GraphicsLayer();


     map.addLayers([dLayer, idlay]);






    function mapReady() {


   //var tlg = document.getElementById("toggleleg");

   //tlg.addEventListener("click", showhideleg);




   var easing = 1;

   var easing_effect ='easeOut Bounce';

   var animation_speed = 500;


   var slider_width = $('#content').width();


      //wire click event for check box to a function

      $('.sub-layer-label, .sub-layer-check').click(updateLayerList);


    //wire click event for left panel

    $('#layer-tabs-left-handle').click(function () {

           var mar = $('#content').css("margin-left");

    var cw = $('#content').css("width");




    if ($('#content').width() == 0) {

    $('#layer-tabs-left-handle').animate({left:268}, "fast", "linear");

    $('#content').animate({width:300}, "fast", "linear" );

    $('#contenttitle').css("display", "inline-block");

    $('#accordion').css("display", "inline-block");

    $(this).css("border", "none");

        $(this).css("background-image", "url(");

        $(this).attr('title', 'Close');


    else {


    $('#layer-tabs-left-handle').animate({left:0}, "fast", "linear");

    $('#content').animate({width:0}, "fast", "linear" );

    $('#contenttitle').css("display", "none");

    //$(this).css("border", "none");

    $(this).css({"background-color": "", "border": "none"});

        $(this).css("background-image", "url(");

        $(this).attr('title', 'Open');









    var is_collapsed = $(this).css("margin-left") == slider_width+"px" && !$(this).is(':animated');



    var sign = (is_collapsed) ? '-' : '+' ;










      function() {

  var cwid = $('#content').width();



            if (cwid == 0) {

  $(this).css({"background-color": "white", "border" : "solid 1px #a6c9e2"});   




  }, function (){

  $(this).css({"background-color": "", "border": "none"});










  function showhideleg() {

   var legwin = document.getElementById("rightPane"); 

   var viz =; = "visible"; 

      registry.byId("accord").selectChild("legendPane", true);








    //Verify that all Layers have been loaded

  //set up to handle layers-add-result

    function verifyLoadStatus(results) {


        //BUILD LEGEND

        legend = new Legend({

   map: map,


   layerInfos: [{

     layer: dLayer,

  hideLayers: [0,1],

  title: "Interactive Map Layers"








        if (results.layers.length == 1) {





    function createLayerList() {



        ////Gets Sub Layer Names then create Layer List/set visibility and check boxes

        var lyrInfos = dLayer.layerInfos;

        //count of all layers in service


        for (lyr in lyrInfos) {

            var lyrname;

            lyrname = lyrInfos[lyr].name;