Delving deeper into advanced CSS and JQuery for a unique layout, I've hit a roadblock. It seems like I might be overlooking something obvious or this could require more intricate scripting to achieve. Despite days of searching, I haven't come across any JQuery and CSS examples that closely match what I need. While single sliding panel demos are easy to find, I can't seem to find anything that caters to two or three overlapping panels and also demonstrates how to position the main content alongside these moving panels.
The goal is to have three panels slide in and out from the left side of the window, with handles located on the panels themselves (similar to a vertical handle at the bottom of a text field). These panels should allow all to be opened simultaneously while leaving a 15px portion along the right edge for user interaction. Additionally, as the panels expand or retract, the width of the main content block should adjust accordingly. It would be a bonus if the panels could remember their positions through cookies even after a browser refresh.
The JQuery script needs to keep track of the open/close state of each panel and the positioning based on whether other panels are extended or retracted. For instance, the third panel may have four different position possibilities depending on the states of the first and second panels.
DETAILS:
(A.) The main window encompasses everything with overflow hidden and fluid height and width. (B.) A header bar within the window holds content and controls with a fixed height of 50px and 100% width. (C.) Below the header lies the main content area that scrolls vertically as needed. (D.) Along the left side, there's a requirement for three independently sliding panels between the header bar and bottom of the window. Each panel is 200px wide and 100% vertical, showing 15px of the right side when retracted, encompassing a vertical handle for user interaction. (E.) The width of the main content space should adjust automatically as panels open or close.
Below are links to three reference screenshots for clearer visualization. Any help would be greatly appreciated - Thank You in advance.