Legend Widget wont let slide out close

[StevenGraf1]

I put the legend widget in the jquery tab slide out and it won't let the slide out close.  Anyone have any insight as to why this is happening?

[HTML]$('.slide-out-div1').tabSlideOut({
            tabHandle: '.handle2',                           //class of the element that will become your tab
            pathToTabImage: 'images/Floor2a.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '90px',                           //height of tab image           //Optionally can be set using css
            imageWidth: '50px',                            //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '90px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top  
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });[/HTML]

[HTML]var quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.aoscloud.net/aosmaps/rest/services/Test/Test/MapServer", {id:'Building Interior Space - Floor 1'});

      legendLayers.push({layer:quakeLayer, title:'Building Interior Space'});

     
      dojo.connect(map, 'onLayersAddResult', function (results) {
        var legend = new esri.dijit.Legend({
          map:map,
          layerInfos:legendLayers
        }, "legendDiv");
        legend.startup();
      });[/HTML]

[HTML]<div class="slide-out-div1"; style="width:auto; height:50%">
  <div id="innerTOC" style="overflow-y:auto; width:100%; height:100%; overflow-x:hidden; width: 100%">
     <a class="handle2" href="http://link-for-non-js-users">Content</a>
        <div id="legendDiv"></div>
       </div>
    </div>[/HTML]
[ATTACH=CONFIG]30261[/ATTACH]

[JonathanUihlein]

If you are using jQuery with DOJO elements, it probably has to do with conflicting CSS.

Have you inspected the offending container with firebug in firefox or webdevtoolbar in chrome?

Otherwise, recreate the issue using http://jsfiddle.net/ and we can take a look 😃

[StevenGraf1]

http://jsfiddle.net/7g4ta/

This is my first time making a fiddle.  The handles aren't showing up for the slide outs but the mouse will change to a finger pointer and they will still work.

[JonathanUihlein · Accepted solution]

Thanks for creating a sample! Just what I needed 😃
No worries about the handles....they aren't showing up because jsfiddle cannot access your images.
Got it to completely hide but you will need to fix the container.

To Fix:
Remove the inline styling on 'slide-out-div' and 'slide-out-div1' (also remove the extra semi-colons).
Change the styling with CSS as you see fit.

<div class="slide-out-div">     <div id="innerTOC">         <!-- code here -->     </div> </div>      <div class="slide-out-div1">     <div id="innerTOC">         <!-- code here -->     </div> </div> 

*edit

Here's a jsfiddle:

http://jsfiddle.net/7g4ta/6/

Notes:
- Changed background color on the handles so they can be seen in jsfiddle (see CSS classes)
- Changed 'topPos' to 120px from 90px for 'slide-out-div1'
- Removed inline styling from slide-out-div, slide-out-div1 and innerTOC divs (NOTE: please do not use the same ID for multiple divs)
- Changed 'height: auto !important' on 'slide-out-div1'

You will need to make a few more CSS changes to achieved your desired outcome.

If you feel you have recieved a sufficient response, please mark a post as the answer and mark this thread as answered.

Thanks!!!

[StevenGraf1]

Thanks!  That did the trick.