Untitled

mail@pastecode.io avatar
unknown
html
2 months ago
1.3 kB
3
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Toggle</title>
<style>
    .content {
        display: none;
    }
    .content.active {
        display: block;
    }
</style>
</head>
<body>

<button id="btnContent1">Content 1</button>
<button id="btnContent2">Content 2</button>

<div id="content1" class="content active">
    <h2>Content 1</h2>
    <p>This is content 1.</p>
</div>

<div id="content2" class="content">
    <h2>Content 2</h2>
    <p>This is content 2.</p>
</div>

<script>
    function showContent(id) {
        var contents = document.getElementsByClassName('content');
        for (var i = 0; i < contents.length; i++) {
            contents[i].classList.remove('active');
        }
        var selectedContent = document.getElementById(id);
        selectedContent.classList.add('active');
    }

    document.getElementById('btnContent1').addEventListener('click', function() {
        showContent('content1');
    });

    document.getElementById('btnContent2').addEventListener('click', function() {
        showContent('content2');
    });

    showContent('content1');
</script>

</body>
</html>
Leave a Comment