HTML expand attribute table from bottom

[AlexGole]

Hi all,

I am trying to create a div (attribute table) that would expand from the bottom and collapse just like in WebAppBuilder. My problem is that my div is hiding behind the map. Any ideas how I can get it to push the map up without loosing the current extent.

Web app Builder (what Id like to achieve)

Attached is my html code

[RobertScheitlin__GISP]

Alex,

   Your whole head section is missing (no style, css, or script). Hard to do anything with this. Hve you tried adjust the z-index of the div?

[AlexGole]

Robert, I was only able to toggle the size of the map so far (although the scalebar is acting weird when toggled, It is going when the height reduces 70% it works fine but I go back to 100% seems like the scale bar goes first) . Here is my code. I am not yet able to toggle the attribute table

toggle map size:

$("#attribute").on('click', function () {

                         var state = $(this).data('state');

                         if (state) {

                             $("#map").animate({ height: '100%'}, 800);

                             state = false;

                         } else {

                             $("#map").animate({ height:'70%'});

                             state = true;

                         }

                         $(this).text(state ? 'Open' : 'Close').data('state', state);

                     });

Now I still need to find a way to toggle the table the same way as the map. Not too sure how to make that happen yet. Any help is welcome

<div id="table" style="top: auto; left: 0px; background: white; right: 0px; bottom: 0px; position: absolute; height: 299.667px; z-index: 101; display:none;">

        <table id="example" class="display nowrap" cellspacing="0" width="50%"></table>

    </div>

[RobertScheitlin__GISP · Accepted solution]

Alex,

   I have edited your JSBin to work now for toggling the table and resizing the map properly:

JS Bin - Collaborative JavaScript Debugging

[AlexGole]

That is it! Thank you!