How to make a <div> Slider?

Question

I'm still new with Javascript. My college giving me a task to make Div Slider. How to code a <div> slider? So it will work like when you press the button, the other stored <div> will shown.

Answer 1

Code div with navigation or any content inside. Give it width. Maybe 300px. Than give it styling.

Then make expandMenu button. Set width of navigation div initially to 0;

with js, make function expandMenu() and get div element with id. make its width 300px. So when button be clicked, div's width becomes 300px so it is visible.

Idk if I explained well😂If u dont understand, chack out traversy media on yt. He has video on it called 'responsive side menu from scratch'. Something like that😅

Answer 2

Hi Made,

There are a lot of ways to achieve the same effect. I'm not sure if the assignment has any additional requirements (like can't use or must use this, that, or the other thing), but this seems like a good supplement to the relevant section in SoloLearn's jQuery Tutorial:

https://www.w3schools.com/jquery/jquery_hide_show.asp

and making it "slide":

https://www.w3schools.com/jquery/jquery_slide.asp

I hope this helps! Let us know how this turns out! :)