dna viewer 3

by tomarriola

HTML

<main>
        <nav>
            <ul class="suspect-tabs">
                <li><button class="suspect-tab-button active" data-suspect="brinkman">Brinkman, Dudley</button></li>
                <li><button class="suspect-tab-button" data-suspect="dooley">Dooley, Eddie</button></li>
                <li><button class="suspect-tab-button" data-suspect="dykman-bill">Dykman, Bill</button></li>
                <li><button class="suspect-tab-button" data-suspect="dykman-robin">Dykman, Robin</button></li>
                <li><button class="suspect-tab-button" data-suspect="fine-andy">Fine, Andy</button></li>
                <li><button class="suspect-tab-button" data-suspect="fine-carl">Fine, Carl</button></li>
                <li><button class="suspect-tab-button" data-suspect="fine-cindy">Fine, Cindy</button></li>
                <li><button class="suspect-tab-button" data-suspect="laughlin">Laughlin, Chas</button></li>
                <li><button class="suspect-tab-button" data-suspect="reagle">Reagle, John</button></li>
            </ul>
        </nav>

        <div class="content-area">
            <nav class="dna-tabs">
                <h4 style="margin-top: 0;">DNA Evidence</h4>
                <ul class="dna-list">
                    <li><button class="dna-tab-button active" data-dna-target="seat-cushion">seat cushion</button></li>
                    <li><button class="dna-tab-button" data-dna-target="back-cushion">back cushion</button></li>
                    <li><button class="dna-tab-button" data-dna-target="white-t-shirt">white t-shirt</button></li>
                    <li><button class="dna-tab-button" data-dna-target="black-panties">black panties</button></li>
                    <li><button class="dna-tab-button" data-dna-target="blue-button">blue button</button></li>
                    <li><button class="dna-tab-button" data-dna-target="shovel">shovel</button></li>
                    <li><button class="dna-tab-button"...

CSS

body {
            font-family: sans-serif;
            margin: 0;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        main {
            max-width: 1200px;
            margin: 2rem auto;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Top Horizontal Tabs for Suspects */
        .suspect-tabs {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            border-bottom: 2px solid #337ab7;
        }

        .suspect-tabs li {
            flex-grow: 1;
        }
        
        .suspect-tab-button {
            width: 100%;
            text-align: center;
            padding: 1rem;
            border: none;
            background-color: #eee;
            color: #333;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
            border-bottom: 2px solid transparent;
        }
        
        .suspect-tab-button:hover {
            background-color: #e0e0e0;
        }
        
        .suspect-tab-button.active {
            background-color: #337ab7;
            color: white;
            border-bottom: 2px solid #337ab7;
        }

        /* Content Area */
        .content-area {
            display: flex;
            min-height: 500px; /* Ensures a consistent layout */
            border-top: none;
        }
        
        /* Vertical DNA Tabs */
        .dna-tabs {
            list-style: none;
            padding: 1rem;
            margin: 0;
            background-color: #f9f9f9;
            width: 250px;
            flex-shrink: 0;
            border-right: 1px solid #ddd;
        }

        .dna-tab-button {
            display: block;
            width: 100%;
       ...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const suspectTabs = document.querySelectorAll('.suspect-tab-button');
            const dnaTabs = document.querySelectorAll('.dna-tab-button');
            const detailsPanes = document.querySelectorAll('.details-pane');
            const dnaContents = document.querySelectorAll('.dna-content');

            // Function to handle suspect tab clicks
            function showSuspectDetails(suspectName) {
                // Deactivate all suspect tabs and details panes
                suspectTabs.forEach(tab => tab.classList.remove('active'));
                detailsPanes.forEach(pane => pane.classList.remove('active'));

                // Activate the selected suspect tab and its details pane
                const selectedSuspectTab = document.querySelector(`.suspect-tab-button[data-suspect="${suspectName}"]`);
                const selectedDetailsPane = document.getElementById(suspectName);
                if (selectedSuspectTab) selectedSuspectTab.classList.add('active');
                if (selectedDetailsPane) selectedDetailsPane.classList.add('active');
                
                // Show the default (first) DNA tab for the new suspect
                dnaTabs.forEach(tab => tab.classList.remove('active'));
                const defaultDnaTab = document.querySelector('.dna-tabs .dna-tab-button:first-child');
                if (defaultDnaTab) defaultDnaTab.classList.add('active');

                dnaContents.forEach(content => content.style.display = 'none');
                const defaultDnaContent = selectedDetailsPane.querySelector('.dna-content:first-of-type');
                if (defaultDnaContent) defaultDnaContent.style.display = 'block';
            }

            // Function to handle DNA tab clicks
            function showDnaComparison(dnaTarget) {
                // Deactivate all DNA tabs and content blocks
                dnaTabs.forEach(tab =>...