pics on top

by tomarriola

HTML

<p>&nbsp;</p>
<nav>
<ul class="suspect-tabs">
<li><button class="suspect-tab-button active" data-suspect="brinkman"><img src="https://www.crimescene.com/images/stories/hand/dudley-brinkman.jpg" alt="Smiling man with dark hair and facial hair" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="dooley"><img src="https://www.crimescene.com/images/stories/hand/eddie-dooley.jpg" alt="Unsmiling man with dark, thinning hair and salt-and-pepper facial hair" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="dykman-bill"><img src="https://www.crimescene.com/images/stories/hand/bill-dykman.jpg" alt="Smiling man with short dark hair and facial hair" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="dykman-robin"><img src="https://www.crimescene.com/images/stories/hand/robyn-dykman.jpg" alt="Smiling woman with glasses and long dark hair in a single braid" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="fine-andy"><img src="https://www.crimescene.com/images/stories/hand/andy-fine.jpg" alt="Smiling man with close-cropped brown and gray hair and brown facial hair" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="fine-carl"><img src="https://www.crimescene.com/images/stories/hand/carl-fine.jpg" alt="Balding man with a wryly serious expression" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="fine-cindy"><img src="https://www.crimescene.com/images/stories/hand/cindy-fine.jpg" alt="Woman with curly dark hair and glasses" width="125" height="125" /></button></li>
<li><button class="suspect-tab-button" data-suspect="laughlin"><img src="https://www.crimescene.com/images/stories/hand/chas-laughlin.jpg" alt="Man with salt-and-pepper hair and five o'clock shadow, wearing a t-shirt and trucker hat" width="125"...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const suspectTabsContainer = document.querySelector('.suspect-tabs');
    const dnaTabsContainer = document.querySelector('.dna-tabs');
    const detailsPanes = document.querySelectorAll('.details-pane');
    
    // Function to show the selected suspect's details
    function showSuspectDetails(suspectName) {
        // Remove 'active' class from all suspect tabs and details panes
        document.querySelectorAll('.suspect-tab-button').forEach(tab => tab.classList.remove('active'));
        detailsPanes.forEach(pane => pane.classList.remove('active'));
        
        // Find and activate the selected suspect tab and its corresponding 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');
            
            // This is the key change to make "seat-cushion" the default
            showDnaComparison("seat-cushion");
        }
    }

    // Function to show the selected DNA comparison
    function showDnaComparison(dnaTarget) {
        // Remove 'active' class from all DNA tabs
        document.querySelectorAll('.dna-tab-button').forEach(tab => tab.classList.remove('active'));
        
        // Find and activate the selected DNA tab
        const selectedDnaTab = document.querySelector(`.dna-tab-button[data-dna-target="${dnaTarget}"]`);
        if (selectedDnaTab) {
            selectedDnaTab.classList.add('active');
        }

        // Get the active suspect's pane
        const activeSuspectPane = document.querySelector('.details-pane.active');
        if (activeSuspectPane) {
            // Hide all DNA content...