Button Tab Switching
You can dynamically add tabs to your page to create a better one-page application. An example can be found on the registration forms page.
Feel free to copy the front-end code and adjust it to your needs. This example uses two tabs, but you can use as many as you’d like.
<button class="switch-tab-btn btn2">Show Content 1</button><button class="switch-tab-btn btn2">Show Content 2</button>
<div id="show-content-1-content">Hello! this is content 1.</div>
<div id="show-content-2-content">Salut! this is content 2.</div>
For example, if your button says “Show Content 1”, it will match with the “show-content-1-content” div element. If your button says “Show Content 1”, it will not match with the “content1-content” div element. Actually, I will create a table with a few more examples of what will and will not work:
|button||content div ID||will it match?|
|Show Content 1||show-content-1||No|
|Show Content 1||show-content-1-content||Yes|
|Show content 1||show-content-1-content||Yes|
This table can be updated if you have any more questions. Feel free to message our webservices team.
Here is an example of the live code: