To hide large chunk of data on a page in web application, sometimes it is required to give user sliding option with a toggle bar from left or right side of page.
In the following approach I will show you how you can make this sidebar toggle bar.
Step 1 Html:
For this togglebar you are going to need to sets of html one inside another like following
Step 2 Css:
In regard to css, there can be many css properties based on aesthetics but following are mandatory for the sliding to work.
In the above, for both ids togglebar and sidebar, position property needs to be set fixed. Otherwise, your page layout will get broken that is there will be extra scrollbar will appear at the bottom of the page which will give really annoying look for the site visitors.
The other thing here to note is, giving margin-right or margin-left to minus value for the sidebar by default so that actual div element is hidden from the eye of site visitor. As there is togglebar which is visible to user, when user clicks that the hidden element becomes visible to user.
Step 3 JS:
For Js you can code it in however way you want. Here is my rough implementation
Lastly, you can view this togglebar in action in this following demo url.
http://demo.mahfoozurrahman.com/togglebar/
Now, you can enjoy giving user sliding option in their page so that they can show/hide information based on their need.