script-switch-content v1.1.2

Script Switch Content | JavaScript/TypeScript

Description

The script allows you to easily create content and switch between them using buttons.

And it also helps to understand the approximate principle of operation of such logic.

Setting

• Create 2 html tags and assign them an ID attribute. One element will be used for content navigation The second element will be used to define all available content

<div id="menu"></div>
<div id="contents"></div>

• In the menu element, create 2 buttons to switch content and a list in the middle for navigation buttons.

<div id="menu">
    <button data-switch-btn-path="back">Back</button>
    <ul></ul>
    <button data-switch-btn-path="next">Next</button>
</div>

• Now we need to define the content and assign them unique identifiers data-content-id. And the attribute data-content-name to indicate the name of the content

<div id="contents">
    <div data-content-name="Content 1" data-content-id="content-1">
        Content 1
    </div>
    <div data-content-name="Content 2" data-content-id="content-2">
        Content 2
    </div>
    <div data-content-name="Content 3" data-content-id="content-3">
        Content 3
    </div>
</div>

• Now you need to get references to all the necessary elements and call the SwitchContent constructor.

const menuElement = document.getElementById("menu");
const contentsElement = document.getElementById("contents");

new SwitchContent(menuElement, contentsElement);

• Done! You can also style buttons etc.

API

End

The code will be improved and optimized over time. This is the first time I've written scripts like this, so I think it turned out well for the first time.

30.12.2024 The code has become more documented, and I think it helps some people understand approximately how to do the same.

Author

Github - MineGame01