Use jQuery to show an element whose parent is hidden

Question

How do I show a fixed position element, when it's parent element is hidden (display: none)?

My scenario.

I have a bottom, fixed toolbar with five buttons across the bar. One of those buttons is a More/Less button that expands and retracts the toolbar showing even more buttons. Inside each button div is a panel element. So, when a button is clicked its panel element is shown and moved so that it sits above the selected button.

Here is some sample markup:

<div id="dashbar" class="dashbar">
    <div id="dashbar-apps" class="dashbar-apps">
       <!-- The More/Less Button -->

       <!-- My First Button -->
       <div id="dash-projects" class="dash-button">
            <i class="fa fa-area-chart fa-fw icon"></i>
            My Projects

            <ul class="dash-menu" id="dash-projects-menu">
                <li><a href="whatever.com">Some</a></li>
                <li><a href="whatever.com">Links</a></li>
                <li><a href="whatever.com">Here</a></li>
            </ul>
        </div>

        <!-- Any number of additional appbar buttons -->
     </div> <!-- for the appbar that is always visible -->

     <div id="app-deck" class="dash-app-deck">
        <!-- The exact same markup for the buttons -->
     </div>
 </div> <!-- for the dashbar as a whole -->

The More/Less button toggles the appdeck visibility with a simple slide animation.

What I want is for someone to be able to expand the dashbar and click one of the buttons in the appdeck portion. Then the toolbar retracts automatically and displays the panel element associated with that button.

Everything works fine except that when the toolbar retracts, it hides the appdeck and (therefore) all the elements inside it -- including the panel element I'm trying to show.

I've played with detaching and moving the element to the body, but that seems excessive. Is there another way to simply show the element when it's parent is hidden?

Thanks.