How It Works:

HTML Structure:
    We have a container with multiple divs (content). Initially, we set only the first div to be visible (style="display:block;"), and others are hidden (style="display:none;").
    There are two buttons: Next and Back.

CSS:
    The .content divs are set to be hidden initially. This will be controlled via JavaScript by changing their display property to block (for visible) or none (for hidden).

JavaScript Logic:
    We select all the .content divs using querySelectorAll and store them in an array-like object divs.
    We maintain a variable currentIndex to track which div is currently visible.
    The showNextDiv() function increments currentIndex, hides the current div, and shows the next one.
    Similarly, the showPrevDiv() function decrements currentIndex, hides the current div, and shows the previous one.
    Event listeners on the Next and Back buttons call these functions when clicked.