dna fiddle

by tomarriola

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crime Scene Investigation</title>
   
</head>
<body>

    <main>
        <section class="slider">
            <details open>
                <summary>Brinkman, Dudley</summary>
                <div class="slider-content">
                    <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>
                                        <img src="https://www.crimescene.com/images/stories/hand/2005-Isuzu-Ascender-dudley.jpg" alt="black SUV" width="200" height="129" />
                                        <figcaption>2005 Isuzu Ascender</figcaption>
                                    </figure>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <h3 class="dna-heading">DNA Comparison</h3>

                    <div class="tab-container">
                        <ul class="tab-list">
                            <li><button class="tab-button active" data-tab-target="#tab-brinkman-seat">seat...

CSS

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

main {
  max-width: 960px;
  margin: 0 auto;
}

/* Slider (Collapsible) styles */
.slider details {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
  background-color: #f9f9f9;
}

.slider summary {
  padding: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  background-color: #eee;
  border-radius: 8px;
  user-select: none;
}

.slider summary:hover {
  background-color: #ddd;
}

.slider-content {
  padding: 1rem;
}

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

/* DNA Heading */
.dna-heading {
  background-color: #efefef;
  text-align: center;
  padding: 0.5rem;
  margin: 1.5rem 0 1rem;
}

/* Tabbed Interface */
.tab-container {
  overflow: hidden;
}

.tab-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
}

.tab-list li {
  margin: 0;
}

.tab-button {
  background-color: transparent;
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  transition: background-color 0.3s, color 0.3s;
}

.tab-button:hover {
  background-color: #f0f0f0;
}

.tab-button.active {
  background-color: #d1d6de;
  font-weight: bold;
  border-bottom: 2px solid #333;
}

.tab-pane {
  display: none;
  padding: 1rem 0;
}

.tab-pane.active {
  display: block;
}

/* DNA Tables */
.dna-table {
  width: 100%;
  border-collapse:...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
            const tabContainers = document.querySelectorAll('.tab-container');

            tabContainers.forEach(container => {
                const tabButtons = container.querySelectorAll('.tab-button');
                const tabPanes = container.querySelectorAll('.tab-pane');

                tabButtons.forEach(button => {
                    button.addEventListener('click', () => {
                        const targetId = button.dataset.tabTarget;
                        const targetPane = document.querySelector(targetId);

                        if (targetPane) {
                            // Deactivate all buttons and panes in this container
                            tabButtons.forEach(btn => btn.classList.remove('active'));
                            tabPanes.forEach(pane => pane.classList.remove('active'));

                            // Activate the clicked button and its corresponding pane
                            button.classList.add('active');
                            targetPane.classList.add('active');
                        }
                    });
                });
            });
        });