Slide on off panel Have a panel slide onto the screen from the left right top or bottom style slider position absolute overflow hidden z index 100 slider top top 50 left 0px transition top 1s height 50 width 100 background red slider top in top 0 slider right left 100 top 0px transition left 1s height 100 width 50 background yellow slider right in left 50 slider bottom top 100 left 0px transition top 1s height 50 width 100 background blue color cyan slider bottom in top 50 but z index 300 border 1px solid blue background color white body height 300px style div id slider1 class top slider Hello top slider div div id slider2 class right slider Hello right slider div div id slider3 class bottom slider Hello bottom slider div p span class but onclick slider slider1 open slider 1 span p p span class but onclick slider slider2 open slider 2 span p p span class but onclick slider slider3 open slider 3 span p script var menu document querySelector menu Using a class instead see note below menu classList toggle hidden phone function slider id console log id id let el document getElementById id if el classList contains in el classList remove in else el classList add in console log ready script Expands on the core example above however it embeds an iframe in the panel so you can bring on or take off an active frame for searching testing howing etc style slider position absolute overflow hidden z index 100 slider bottom top 100 left 0px transition top 1s height 100 width 100 background blue color cyan slider bottom in top 0 but z index 300 border 1px solid blue background color white padding 5px body height 300px max height 300px style div id sliderpanel class bottom slider iframe height 300 style width 100 scrolling no title F28WP src https codepen io cheeseandrea embed OBzmyw default tab html 2Cresult editable true frameborder no loading lazy allowtransparency true allowfullscreen true See the Pen a href https codepen io cheeseandrea pen OBzmyw F28WP a by Shan lin a href https codepen io cheeseandrea cheeseandrea a on a href https codepen io CodePen a iframe div span class but onclick slider sliderpanel open slider panel span script function slider id console log id id let el document getElementById id if el classList contains in el classList remove in else el classList add in console log toggle panel ready script
el classList remove in else el classList add in console log ready script Expands on the core example above however it embeds an iframe in the panel so you can bring on or take off an active frame for searching testing howing etc style slider position absolute overflow hidden z index 100 slider bottom top 100 left 0px transition top 1s height 100 width 100 background blue color cyan slider bottom in top 0 but z index 300 border 1px solid blue background color white padding 5px body height 300px max height 300px style div id sliderpanel class bottom slider iframe height 300 style width 100 scrolling no title F28WP src https codepen io cheeseandrea embed OBzmyw default tab html 2Cresult editable true frameborder no loading lazy allowtransparency true allowfullscreen true See the Pen a href https codepen io cheeseandrea pen OBzmyw F28WP a by Shan lin a href https codepen io cheeseandrea cheeseandrea a on a href https codepen io CodePen a iframe div span class but onclick slider sliderpanel open slider panel span script function slider id console log id id let el document getElementById id if el classList contains in el classList remove in else el classList add in console log toggle panel ready script