Page History

<style>
    .tab {
        display: inline-block;
        padding: 10px 20px;
        cursor: pointer;
        color: white;
        border-radius: 5px;
        margin-right: 5px;
    }
    .tab-it-staff { background-color: #4CAF50; }
    .tab-it-manager { background-color: #2196F3; }
    .tab-general-employee { background-color: #FF9800; }
    .tab-default { background-color: #f0f0f0; }
    .content { display: none; }
    .active { display: block; }
</style>

<div>
    <div class="tab tab-it-staff" onclick="showContent('it-staff')">IT Staff</div>
    <div class="tab tab-it-manager" onclick="showContent('it-manager')">IT Manager</div>
    <div class="tab tab-general-employee" onclick="showContent('general-employee')">General Employee</div>
</div>

<div id="it-staff" class="content active">
    <p>Policy Provision for IT Staff.</p><p>Applies to Systems processing CUI</p>Provisions

Lorem ipsum odor amet, consectetuer adipiscing elit. Ainteger gravida mattis ut tristique. Litora orci rhoncus arcu fusce eros fermentum mus eleifend. Per hendrerit quisque, id neque iaculis a auctor. Ad ullamcorper praesent scelerisque id tempus. Pulvinar rhoncus vestibulum duis luctus euismod dis. Enim class quam per pulvinar tempor cubilia mus. Dolor habitant hac ullamcorper elementum, potenti imperdiet habitasse.




bullet 1
bullet 2
bullet 3
Guidance
bullet 1
bullet 2
bullet 3
FAQ
bullet 1
bullet 2
bullet 3
</div>
<div id="it-manager" class="content">
    <p>Policy Provision for IT Managers.</p>
</div>
<div id="general-employee" class="content">
    <p>Policy Provision for General Employees.</p>
</div>

<script>
    function showContent(tabId) {
        var contents = document.querySelectorAll('.content');
        contents.forEach(function(content) {
            content.classList.remove('active');
        });
        document.getElementById(tabId).classList.add('active');
    }
</script>