dns viewer

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>
                            </figure>
                        </td>
                        <td>
                            <figure>
        ...

CSS

/* 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;
}

.person-details-pane.active {
    display: block;
}

/* Person and Vehicle Table */
.person-info {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    border: 0;
}

.person-info th,
.person-info td {
    text-align: center;
    padding: 1rem;
}

.person-info figure {
    margin: 0;
}

.person-info img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.person-info figcaption {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    color:...

JavaScript

// This code is now wrapped in an immediately invoked function expression (IIFE)
// to avoid conflicts and ensure it runs immediately, which is ideal for jsfiddle.
(function() {
    const nameButtons = document.querySelectorAll('.name-button');
    const detailPanes = document.querySelectorAll('.person-details-pane');
    
    // Function to handle showing the correct person's details
    const showPersonDetails = (targetId) => {
        // Hide all detail panes
        detailPanes.forEach(pane => pane.classList.remove('active'));

        // Show the target pane
        const targetPane = document.querySelector(targetId);
        if (targetPane) {
            targetPane.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 in the new pane
            const firstTabButton = activeTabContainer.querySelector('.tab-button');
            const firstTabPane = activeTabContainer.querySelector(firstTabButton.dataset.tabTarget);
            if (firstTabButton && firstTabPane) {
                firstTabButton.classList.add('active');
                firstTabPane.classList.add('active');
            }
        }
    };

    // Add click event listeners to the name buttons
    nameButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all name buttons
            nameButtons.forEach(btn => btn.classList.remove('active'));
            // Add active class to the clicked button
...