Discover real-time results of accordions and their information as you search

Question

Discover real-time results of accordions and their information as you search

I am looking to add a search functionality to filter through a list of accordions and their contents on my HTML page. I want the search box to be able to search both the accordion titles and the content within each accordion. This is my first time posting a question on Stackoverflow, so I apologize if it's not clear.

Below is the code showing how I create and display the accordions when a user clicks on a title. (I have a single accordion in the HTML that I clone using a JavaScript file.)

// HTML code:

<input type="search" id="accordion_search_bar" placeholder="Search"/>

<div id="accordions">
  <div id="accID1" class="AccordionContainer">
    <button id="accID" class="accordion"></button>
  <div class="panel" id="panel1">  
</div>

// JavaScript code:

for (a = 0; a < acc.length; a++) {
  acc[a].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

// Additional JavaScript for the search feature:

$(function() {
   var searchTerm, panelContainerId;
   // Create a new case-insensitive 'contains' selector
   $.expr[":"].containsCaseInsensitive = function(n, i, m) {
   return (
  jQuery(n)
    .text()
    .toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0
    );
    };

   $("#accordion_search_bar").on("change keyup paste click", function()     {
   searchTerm = $(this).val();
   $("#accordions > .AccordionContainer").each(function() {
    panelContainerId = "#" + $(this).attr("id");
   $(
    panelContainerId + ":not(:containsCaseInsensitive(" + searchTerm +       "))"
   ).hide();
   $(
    panelContainerId + ":containsCaseInsensitive(" + searchTerm + ")"
   ).show();
   });
   });
   });

In essence, I am trying to implement a search bar that can search through the buttons of all accordions and also look within every panel created for each accordion.

javascript jquery html css

Answer 1

Answer №1

By utilizing the HTML property innerText, we have the ability to extract the text content of each accordion and determine if it contains the desired search text. If a match is found, the accordion is displayed, otherwise it is hidden. An informative article on innerText can be found on MDN here. According to MDN,

"It approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard"

In your case, you may use innerText for searching through accordions with the following approach (using vanilla JavaScript for compatibility):

Retrieve a list of accordions:

accordions = document.querySelectorAll('.AccordionContainer');

If the search term is stored in a variable named searchText, iterate through each accordion and assess its text content:

Array.prototype.forEach.call(accordions, function(accordion) {
    if (accordion.innerText.toLowerCase().indexOf(searchText) >= 0) {
        // Display the accordion if searchText is found
        accordion.style.display = 'block';
    } else {
        // Hide the accordion if searchText is not present
        accordion.style.display = 'none';
    }
});

To ensure case insensitivity, both the search term and accordion text content were converted to lowercase.

An example showcasing an input event listener linked to the search bar could look like the following:

var search = document.getElementById('accordion_search_bar'),
    accordions = document.querySelectorAll('.AccordionContainer');

// Show content when clicked
Array.prototype.forEach.call(accordions, function(accordion) {
    accordion.querySelector('button').addEventListener('click', function() {
        this.nextElementSibling.classList.add('active');
    });
});

// Implement search functionality
search.addEventListener('input', function() {
    var searchText = search.value.toLowerCase();
    Array.prototype.forEach.call(accordions, function(accordion) {
        if (accordion.innerText.toLowerCase().indexOf(searchText) >= 0) {
            accordion.style.display = 'block';
        } else {
            accordion.style.display = 'none';
        }
    });
});

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}
.panel.active {
    max-height: 300px;
}

<input type="text" id="accordion_search_bar">
<div id="accordions">
  <div class="AccordionContainer">
    <button class="accordion">Show Content</button>
    <div class="panel" id="panel1"> This is accordion text</div>
  </div>
    <div class="AccordionContainer">
    <button class="accordion">Show Content</button>
    <div class="panel" id="panel1"> This is another lot of accordion text</div>
  </div>
</div>

Note that using innerText will search all text content within the accordion, including the button text. To specifically search the panel text, target that element and apply innerText.

Answer 2

By utilizing the HTML property innerText, we have the ability to extract the text content of each accordion and determine if it contains the desired search text. If a match is found, the accordion is displayed, otherwise it is hidden. An informative article on innerText can be found on MDN here. According to MDN,

"It approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard"

In your case, you may use innerText for searching through accordions with the following approach (using vanilla JavaScript for compatibility):

Retrieve a list of accordions:

accordions = document.querySelectorAll('.AccordionContainer');

If the search term is stored in a variable named searchText, iterate through each accordion and assess its text content:

Array.prototype.forEach.call(accordions, function(accordion) {
    if (accordion.innerText.toLowerCase().indexOf(searchText) >= 0) {
        // Display the accordion if searchText is found
        accordion.style.display = 'block';
    } else {
        // Hide the accordion if searchText is not present
        accordion.style.display = 'none';
    }
});

To ensure case insensitivity, both the search term and accordion text content were converted to lowercase.

An example showcasing an input event listener linked to the search bar could look like the following:

var search = document.getElementById('accordion_search_bar'),
    accordions = document.querySelectorAll('.AccordionContainer');

// Show content when clicked
Array.prototype.forEach.call(accordions, function(accordion) {
    accordion.querySelector('button').addEventListener('click', function() {
        this.nextElementSibling.classList.add('active');
    });
});

// Implement search functionality
search.addEventListener('input', function() {
    var searchText = search.value.toLowerCase();
    Array.prototype.forEach.call(accordions, function(accordion) {
        if (accordion.innerText.toLowerCase().indexOf(searchText) >= 0) {
            accordion.style.display = 'block';
        } else {
            accordion.style.display = 'none';
        }
    });
});

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}
.panel.active {
    max-height: 300px;
}

<input type="text" id="accordion_search_bar">
<div id="accordions">
  <div class="AccordionContainer">
    <button class="accordion">Show Content</button>
    <div class="panel" id="panel1"> This is accordion text</div>
  </div>
    <div class="AccordionContainer">
    <button class="accordion">Show Content</button>
    <div class="panel" id="panel1"> This is another lot of accordion text</div>
  </div>
</div>

Note that using innerText will search all text content within the accordion, including the button text. To specifically search the panel text, target that element and apply innerText.

Discover real-time results of accordions and their information as you search

Answer №1

Similar questions

Troubleshooting module not being found with rekuire, requirish, or rfr in resolving relative require problem in nodejs

Responsive design with Bootstrap 4's column grid system

Array of materials for ThreeJS GLTFLoader

Trouble retrieving an array within a nested immutable object

Encountering an issue when attempting to execute a sample test using Selenium WebDriver (WebdriverJS)

Counting Characters in a Text Area and Adding Tabs Using JavaScript

Is it possible to implement CSS code from a server request into a React application?

Using HTML to position multiple lines of text alongside an image

Jquery : The initial call to Ajax is not being made

Tips on adjusting section height as window size changes?

What is the best way to record and share a video with jquery and laravel?

Using jQuery to select the child element of the parent that came before

Issue encountered in React Native Expo: Attempting to access an object that is undefined while evaluating item.basicData.criminalName

Having trouble finding the ./.env file in Gatsby. Encountering an env-cmd error

Is it possible to customize the Toolbar in react-data-grid by adding your own components?

When working on a small screen, Bootstrap generates divs one by one

Fetching text box value that has already been assigned dynamically using JavaScript

The Vue template is not able to recognize the Pug language syntax within the .vue file

Is there a glitch with the External Style Sheet in the CodeIgniter PHP framework?

Images failing to appear