Unable to expand sections after search bar input

JavaScript
1

I have a collapsible glossary list with an alphabet bar and a search bar. Everything works fine but after entering search bar input, the glossary sections stop expanding when clicking an alphabet bar letter or the glossary section itself. Any idea on how to fix the script?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glossary with Floating Alphabet</title>
    <style>
        /* Existing styles */
        /* Adjustments may be needed based on the provided CSS */
        .alphabet-bar {
            position: fixed;
            top: 0;
            background-color: #f1f1f1;
            width: 100%;
            text-align: center;
            padding: 10px;
            z-index: 1000;
            border-bottom: 1px solid #ccc;
        }

        .alphabet-bar a {
            margin: 2 9px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            padding: 10px; /* Adjust padding as needed */
    display: inline-block; /* Ensure the background color applies nicely */
border-radius: 4px;
        }

        .alphabet-bar a:hover {
            color: #feecc8;
            background-color: #333;

        }

.indented-p {
    margin-left: 30px;
}

        .search-bar {
            margin-bottom: 20px;
            text-align: center;
            padding-top: 80px;
        }

        .search-bar input {
            padding: 10px;
            width: 50%;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .glossary-section {
            margin-top: 10px;

        }
        


        .letter-header {
    background-color: #feecc8;
    color: #333;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Ensure relative positioning for the absolute positioning of the link */
}

  .active, .letter-header:hover {
  background-color: #c8dafe;
}

        .glossary-items {
            list-style-type: none;
            padding-left: 20px;
            display: none;
            transition: max-height 0.5s ease-out; /* Optional for smooth collapsing */
        }

        .glossary-items li {
            padding: 5px 0;
        }

        .return-top {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    position: absolute;
    right: 10px; /* Adjust as needed for spacing */
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hide by default */
    
}

        .return-top:hover {
            color: #ccc;
        }

        .return-top::before {
            content: "⬆️";
            margin-right: 5px;
        }

        @media only screen and (max-width: 768px) {
            .search-bar input {
                width: 80%;
            }

            .alphabet-bar {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="glossary-container" id="top">
        <!-- Search Bar -->
        <div class="search-bar">
            <input type="text" id="glossary-search" placeholder="Zoek in begrippenlijst ..." />
        </div>

        <!-- Alphabet Bar -->
        <div class="alphabet-bar" id="alphabetBar">
            <a href="#A" onclick="expandSection('A')">A</a>
            <a href="#B" onclick="expandSection('B')">B</a>
            <a href="#C" onclick="expandSection('C')">C</a>
            <a href="#D" onclick="expandSection('D')">D</a>
            <a href="#E" onclick="expandSection('E')">E</a>
            <a href="#F" onclick="expandSection('F')">F</a>
            <a href="#G" onclick="expandSection('G')">G</a>
            <a href="#H" onclick="expandSection('H')">H</a>
            <a href="#I" onclick="expandSection('I')">I</a>
            <a href="#J" onclick="expandSection('J')">J</a>
            <a href="#K" onclick="expandSection('K')">K</a>
            <a href="#L" onclick="expandSection('L')">L</a>
            <a href="#M" onclick="expandSection('M')">M</a>
            <a href="#N" onclick="expandSection('N')">N</a>
            <a href="#O" onclick="expandSection('O')">O</a>
            <a href="#P" onclick="expandSection('P')">P</a>
            <a href="#Q" onclick="expandSection('Q')">Q</a>
            <a href="#R" onclick="expandSection('R')">R</a>
            <a href="#S" onclick="expandSection('S')">S</a>
            <a href="#T" onclick="expandSection('T')">T</a>
            <a href="#U" onclick="expandSection('U')">U</a>
            <a href="#V" onclick="expandSection('V')">V</a>
            <a href="#W" onclick="expandSection('W')">W</a>
            <a href="#X" onclick="expandSection('X')">X</a>
            <a href="#Y" onclick="expandSection('Y')">Y</a>
            <a href="#Z" onclick="expandSection('Z')">Z</a>
        </div>

        <!-- Glossary Content -->
        <div class="glossary-content">
            <div id="A" class="glossary-section">
                <h2 class="letter-header">A
                    <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
                </h2>
                <ul class="glossary-items">
                    <li><h3>Apple</h3><span class="indented-p">Umbrella</span></li>
                    <li><h3>Antelope</h3><span class="indented-p">test 121212</span></li>
                    <li><h3>Avocado</h3><span class="indented-p">test 35535353</span></li>
                </ul>
            </div>

            <div id="B" class="glossary-section">
                <h2 class="letter-header">B
                    <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
                </h2>
                <ul class="glossary-items">
                    <li><h3>Banana</h3><span class="indented-p">Gelembrella</span></li>
                    <li><h3>Blueberry</h3><span class="indented-p">testtsstst</span></li>
                    <li><h3>Bee</h3><span class="indented-p">xggezgzegezgezgz</span></li>
                </ul>
            </div>

        <div id="C" class="glossary-section">
        <h2 class="letter-header">C
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Cat</h3></li>
            <li><h3>Carrot</h3></li>
            <li><h3>Cucumber</h3></li>
        </ul>
    </div>

    <div id="D" class="glossary-section">
        <h2 class="letter-header">D
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Dog</h3></li>
            <li><h3>Dragonfruit</h3></li>
            <li><h3>Duck</h3></li>
        </ul>
    </div>

    <div id="E" class="glossary-section">
        <h2 class="letter-header">E
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Elephant</h3></li>
            <li><h3>Eggplant</h3></li>
            <li><h3>Eagle</h3></li>
        </ul>
    </div>

    <div id="F" class="glossary-section">
        <h2 class="letter-header">F
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Fish</h3></li>
            <li><h3>Fig</h3></li>
            <li><h3>Fox</h3></li>
        </ul>
    </div>

    <div id="G" class="glossary-section">
        <h2 class="letter-header">G
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Giraffe</h3></li>
            <li><h3>Grapes</h3></li>
            <li><h3>Goose</h3></li>
        </ul>
    </div>

    <div id="H" class="glossary-section">
        <h2 class="letter-header">H
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Horse</h3></li>
            <li><h3>Honeydew</h3></li>
            <li><h3>Hawk</h3></li>
        </ul>
    </div>

    <div id="I" class="glossary-section">
        <h2 class="letter-header">I
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Iguana</h3></li>
            <li><h3>Iceberg</h3></li>
            <li><h3>Insect</h3></li>
        </ul>
    </div>

    <div id="J" class="glossary-section">
        <h2 class="letter-header">J
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Jaguar</h3></li>
            <li><h3>Jalapeno</h3></li>
            <li><h3>Jackfruit</h3></li>
        </ul>
    </div>

    <div id="K" class="glossary-section">
        <h2 class="letter-header">K
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Kangaroo</h3></li>
            <li><h3>Kiwi</h3></li>
            <li><h3>Koala</h3></li>
        </ul>
    </div>

    <div id="L" class="glossary-section">
        <h2 class="letter-header">L
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Lion</h3></li>
            <li><h3>Lemon</h3></li>
            <li><h3>Lettuce</h3></li>
        </ul>
    </div>

    <div id="M" class="glossary-section">
        <h2 class="letter-header">M
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Monkey</h3></li>
            <li><h3>Mango</h3></li>
            <li><h3>Moose</h3></li>
        </ul>
    </div>

    <div id="N" class="glossary-section">
        <h2 class="letter-header">N
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Newt</h3></li>
            <li><h3>Nectarine</h3></li>
            <li><h3>Narwhal</h3></li>
        </ul>
    </div>

    <div id="O" class="glossary-section">
        <h2 class="letter-header">O
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Ostrich</h3></li>
            <li><h3>Orange</h3></li>
            <li><h3>Owl</h3></li>
        </ul>
    </div>

    <div id="P" class="glossary-section">
        <h2 class="letter-header">P
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Panda</h3></li>
            <li><h3>Pineapple</h3></li>
            <li><h3>Parrot</h3></li>
        </ul>
    </div>

    <div id="Q" class="glossary-section">
        <h2 class="letter-header">Q
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Quail</h3></li>
            <li><h3>Quince</h3></li>
        </ul>
    </div>

    <div id="R" class="glossary-section">
        <h2 class="letter-header">R
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Rabbit</h3></li>
            <li><h3>Raspberry</h3></li>
            <li><h3>Raccoon</h3></li>
        </ul>
    </div>

    <div id="S" class="glossary-section">
        <h2 class="letter-header">S
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Snake</h3></li>
            <li><h3>Strawberry</h3></li>
            <li><h3>Sheep</h3></li>
        </ul>
    </div>

    <div id="T" class="glossary-section">
        <h2 class="letter-header">T
            <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
        </h2>
        <ul class="glossary-items">
            <li><h3>Tiger</h3></li>
            <li><h3>Tomato</h3></li>
            <li><h3>Tortoise</h3></li>
        </ul>
    </div>
    
    <div id="U" class="glossary-section">
    <h2 class="letter-header">U
        <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
    </h2>
    <ul class="glossary-items">
        <li><h3>Umbrella</h3></li>
        <li><h3>Unicorn</h3></li>
        <li><h3>Ukelele</h3></li>
    </ul>
</div>

<div id="V" class="glossary-section">
    <h2 class="letter-header">V
        <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
    </h2>
    <ul class="glossary-items">
        <li><h3>Vase</h3></li>
        <li><h3>Violin</h3></li>
        <li><h3>Vulture</h3></li>
    </ul>
</div>

<div id="W" class="glossary-section">
    <h2 class="letter-header">W
        <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
    </h2>
    <ul class="glossary-items">
        <li><h3>Whale</h3></li>
        <li><h3>Watermelon</h3></li>
        <li><h3>Wolf</h3></li>
    </ul>
</div>

<div id="X" class="glossary-section">
    <h2 class="letter-header">X
        <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
    </h2>
    <ul class="glossary-items">
        <li><h3>Xylophone</h3></li>
        <li><h3>Xerus</h3></li>
    </ul>
</div>

<div id="Y" class="glossary-section">
    <h2 class="letter-header">Y
        <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
    </h2>
    <ul class="glossary-items">
        <li><h3>Yak</h3></li>
        <li><h3>Yoghurt</h3></li>
        <li><h3>Yellow</h3></li>
    </ul>
</div>

<div id="Z" class="glossary-section">
    <h2 class="letter-header">Z
        <a href="#top" class="return-top" onclick="scrollToTop(event)">Naar boven</a>
    </h2>
    <ul class="glossary-items">
        <li><h3>Zebra</h3></li>
        <li><h3>Zucchini</h3></li>
        <li><h3>Zephir</h3></li>
    </ul>
</div>
           
        </div>
    </div>


<!-- JavaScript -->
<script>
    // Function to sort glossary items alphabetically
    document.querySelectorAll('.glossary-items').forEach(function(ul) {
        Array.from(ul.getElementsByTagName("li"))
            .sort(function(a, b) {
                return a.textContent.localeCompare(b.textContent);
            })
            .forEach(function(li) {
                ul.appendChild(li);
            });
    });



    // Function to handle search input
    function handleSearchInput() {
        const query = document.getElementById('glossary-search').value.toLowerCase().trim(); // Trim whitespace
        let found = false;

        document.querySelectorAll('.glossary-section').forEach(function (section) {
            const letterHeader = section.querySelector('.letter-header');
            const itemsList = section.querySelector('.glossary-items');
            const returnTop = section.querySelector('.return-top');
            let matchFound = false;

            // Check each glossary item within the section, but only within the <h3> tags
            section.querySelectorAll('li h3').forEach(function (item) {
                const itemText = item.textContent.toLowerCase();
                if (itemText.includes(query)) {
                    item.parentElement.style.display = 'list-item'; // Show matching item (parent li)
                    matchFound = true;
                } else {
                    item.parentElement.style.display = 'none'; // Hide non-matching items (parent li)
                }
            });

            // Handle matching sections based on query
            if (query) {
                if (matchFound) {
                    letterHeader.style.display = 'flex'; // Show section header if matches found
                    itemsList.style.display = 'block'; // Expand the section
                    if (!found) {
                        section.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Scroll to the first matching section
                        found = true;
                    }
                    returnTop.style.display = 'inline'; // Show "Naar boven" link
                } else {
                    letterHeader.style.display = 'none'; // Hide section header if no matches
                    itemsList.style.display = 'none'; // Ensure items list is hidden
                    returnTop.style.display = 'none'; // Hide "Naar boven" link if no matches
                }
            } else {
                letterHeader.style.display = 'flex'; // Show all sections when query is empty
                itemsList.style.display = 'none'; // Collapse sections by default
                returnTop.style.display = 'none'; // Hide "Naar boven" link
            }
        });
    }

    // Attach the search handler to the search bar input event
    document.getElementById('glossary-search').addEventListener('input', handleSearchInput);

    // Function to expand or collapse a glossary section
    function toggleSection(section) {
        const itemsList = section.querySelector('.glossary-items');
        const header = section.querySelector('.letter-header');
        const returnTop = header.querySelector('.return-top');

        // Collapse or expand the section
        if (itemsList.style.display === 'block') {
            // Collapse the section
            itemsList.style.display = 'none';
            returnTop.style.display = 'none'; // Hide "Naar boven" link
        } else {
            // Expand the section
            document.querySelectorAll('.glossary-items').forEach(function (item) {
                item.style.display = 'none'; // Collapse all sections first
            });

            document.querySelectorAll('.return-top').forEach(function (returnTop) {
                returnTop.style.display = 'none'; // Hide all "Naar boven"
            });

            itemsList.style.display = 'block'; // Expand clicked section
            returnTop.style.display = 'inline'; // Show "Naar boven" link

            // Scroll to the section
            section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // Clear the search input field
        document.getElementById('glossary-search').value = '';
    }

    // Function to expand the section of the letter clicked in the alphabet bar
    function expandSection(letter) {
        // Collapse all sections
        document.querySelectorAll('.glossary-items').forEach(function (item) {
            item.style.display = 'none'; // Collapse all sections first
        });

        document.querySelectorAll('.letter-header').forEach(function (header) {
            header.style.display = 'flex'; // Ensure all headers are visible
        });

        document.querySelectorAll('.return-top').forEach(function (returnTop) {
            returnTop.style.display = 'none'; // Hide all "Naar boven"
        });

        // Find the section corresponding to the clicked letter
        const section = document.querySelector('#' + letter + ' .glossary-items');
        if (section) {
            section.style.display = 'block'; // Expand clicked letter section
            section.previousElementSibling.style.display = 'flex'; // Ensure header is visible
            section.previousElementSibling.querySelector('.return-top').style.display = 'inline'; // Show "Naar boven"
            section.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Scroll to the section
        }

        // Clear the search input field
        document.getElementById('glossary-search').value = '';
    }

    // Attach event listeners to alphabet bar
    document.querySelectorAll('.alphabet-bar a').forEach(function (anchor) {
        anchor.addEventListener('click', function (event) {
            event.preventDefault(); // Prevent default link behavior
            const letter = this.getAttribute('href').substring(1); // Get letter from href
            expandSection(letter);
        });
    });

    // Attach event listeners to glossary sections for click-to-toggle functionality
    document.querySelectorAll('.glossary-section').forEach(function (section) {
        section.addEventListener('click', function () {
            toggleSection(this);
        });
    });
</script>


</body>
</html>
2

When searching you are setting display: none on the list items but never set them back again. So you can only see the content of the expand item that matched the search.

section.querySelectorAll('li h3').forEach(function(item) {
  const itemText = item.textContent.toLowerCase();
  if (itemText.includes(query)) {
    item.parentElement.style.display = 'list-item'; // Show matching item (parent li)
    matchFound = true;
  } else {
    item.parentElement.style.display = 'none'; // Hide non-matching items (parent li)
  }
});

  1. Search for “ab”, Rabbit is shown.

  2. Click “A”.

  3. Now only the “R” item can be expanded, well it is the only one where you can see the content.

I assume you just have to reset the list items, like you are with other elements.

3

thanks for your reply, lasjorg!