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="tab-content">
  <div id="show-content-1-content">Hello! this is content 1.</div>
  <div id="show-content-2-content">Salut! this is content 2.</div>
<script src="https://webservices.dixie.edu/wp-content/themes/dixie-s15/js/extras/tab-switching.js"></script>

I believe the most important adjustments to make are that the text inside each button element should match the div ID of its content, plus the actual keyword “-content”. The Javascript will automatically match them as lowercase, and insert dashes between the displayed button texts.

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:

Hello! this is content 1.
Salut! this is content 2.