Crime Scene Investigation

by tomarriola

HTML

<main>
        <div class="name-list-container">
            <h3>Suspects</h3>
            <ul>
                <li><button class="name-button active" data-target="#brinkman-details">Brinkman, Dudley</button></li>
                <li><button class="name-button" data-target="#dooley-details">Dooley, Eddie</button></li>
                <li><button class="name-button" data-target="#dykman-bill-details">Dykman, Bill</button></li>
                <li><button class="name-button" data-target="#dykman-robin-details">Dykman, Robin</button></li>
                <li><button class="name-button" data-target="#fine-andy-details">Fine, Andy</button></li>
                <li><button class="name-button" data-target="#fine-carl-details">Fine, Carl</button></li>
                <li><button class="name-button" data-target="#fine-cindy-details">Fine, Cindy</button></li>
                <li><button class="name-button" data-target="#laughlin-chas-details">Laughlin, Chas</button></li>
                <li><button class="name-button" data-target="#reagle-john-details">Reagle, John</button></li>
            </ul>
        </div>
        
        <div class="person-details-container">
            <div id="brinkman-details" class="person-details-pane active">
                <h2>Brinkman, Dudley</h2>
                <table class="person-info">
                    <thead>
                        <tr>
                            <th>Subject</th>
                            <th>Subject's Vehicle</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <figure>
                                    <img src="https://www.crimescene.com/images/stories/hand/dudley-brinkman.jpg" alt="Blue-eyed man with short dark hair" width="200" height="200" />
                                    <figcaption>Dudley Brinkman</figcaption>
                      ...

CSS

<style>
        /* General Layout */
        body {
            font-family: sans-serif;
            margin: 2rem;
            line-height: 1.6;
        }

        main {
            display: flex;
            gap: 2rem; /* Spacing between the name list and the content area */
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Name List (Left Column) */
        .name-list-container {
            flex-basis: 300px; /* Fixed width for the name list */
            flex-shrink: 0;
            background-color: #f0f0f0;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .name-list-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .name-list-container li {
            margin-bottom: 0.5rem;
        }
        
        .name-button {
            width: 100%;
            text-align: left;
            padding: 0.75rem 1rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #fff;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.2s;
        }
        
        .name-button:hover {
            background-color: #e9e9e9;
            transform: translateY(-2px);
        }
        
        .name-button.active {
            background-color: #337ab7;
            color: white;
            border-color: #337ab7;
            font-weight: bold;
        }

        /* Person Details (Right Column) */
        .person-details-container {
            flex-grow: 1; /* Takes up the remaining space */
            background-color: #f9f9f9;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .person-details-pane {
            display: none;
        }
        
  ...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const nameButtons = document.querySelectorAll('.name-button');
            const detailPanes = document.querySelectorAll('.person-details-pane');

            // Find and activate the default person and tab
            const defaultButton = document.querySelector('.name-button.active');
            const defaultPane = document.querySelector(defaultButton.dataset.target);
            if (defaultPane) {
                defaultPane.classList.add('active');
            }

            nameButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // Hide all detail panes
                    detailPanes.forEach(pane => pane.classList.remove('active'));

                    // Remove active class from all name buttons
                    nameButtons.forEach(btn => btn.classList.remove('active'));

                    // Show the target pane
                    const targetId = button.dataset.target;
                    const targetPane = document.querySelector(targetId);
                    if (targetPane) {
                        targetPane.classList.add('active');
                    }

                    // Add active class to the clicked button
                    button.classList.add('active');

                    // Handle internal tabs within the newly visible pane
                    const activeTabContainer = targetPane.querySelector('.tab-container');
                    if (activeTabContainer) {
                        const allTabs = activeTabContainer.querySelectorAll('.tab-button');
                        const allPanes = activeTabContainer.querySelectorAll('.tab-pane');
                        allTabs.forEach(tab => tab.classList.remove('active'));
                        allPanes.forEach(pane => pane.classList.remove('active'));
                        
                        // Default to the first tab...