Java-Scripts.net

Dynamic Content Box

Create a tabbed or interactive experience. This script swaps the content of a container instantly, making your page feel faster and more responsive.

Content 1

This is the default content loaded on the page.

Copy the Script

<script>
var content = {
    1: "<h3>First</h3><p>This is the first section.</p>",
    2: "<h3>Second</h3><p>This is the second section.</p>",
    3: "<h3>Third</h3><p>This is the third section.</p>"
};

function show(id) {
    document.getElementById("box").innerHTML = content[id];
}
</script>

<button onclick="show(1)">1</button>
<button onclick="show(2)">2</button>
<div id="box">Default Text</div>

Frequently Asked Questions

No. This simple version stores the content in JavaScript arrays on the page. AJAX loads content from the server. This script is instant but better suited for small amounts of data.

Yes. By setting `innerHTML` instead of `innerText`, you can include formatting tags like bold, links, or images in your content strings.

Search engines can read the JavaScript content, but static HTML is generally preferred for critical keywords. Use this for interactive elements like tabs or feature previews.