Searching for hidden elements within a div using a filter option

An accordion is located inside a div and a search box has been added to the div with the intention of serving as a search filter. Some accordion elements are visible within the div while others are hidden. The problem arises when trying to make the filter function only on visible elements.

Currently, the code searches for all elements within the div, causing the page to become unresponsive when the search box is cleared. It requires a page refresh to regain responsiveness.

Any guidance or solution leading in the right direction would be greatly appreciated.

https://i.stack.imgur.com/bZCuP.png

$(document).ready(function() {
  $("#searchTC").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#testcases div").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="panel">
    <div class="panel-heading">
      <h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>

      <div class="panel-actions">
        <!--Search TestCases-->
        <div id="filterTC" class="form-group">
          <div class="input-search">
            <i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
            <input type="search" class="form-control" placeholder="Search..." id="searchTC">
          </div>
        </div>
        <!--Select All/Deselect All Toggle-->
        <div class="toggle-wrap w-checkbox float-right">
          <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
          <label class="toggle-label w-form-label" for="Toggle-Switch"></label>
          <div class="toggle">
            <div class="toggle-active">
              <div class="active-overlay"></div>
              <div class="top-line"></div>
              <div class="bottom-line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-body container-fluid">
      <div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
        <div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
          <div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label>            tc_SearchProducts</div>
          <div class="accordion-body js-accordion-body">
            <div class="accordion-body__contents">
              <div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
                <div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
                  <div class="modal-dialog modal-simple">
                    <div class="modal-content">
                      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                      <div class="modal-body table-responsive">
                        <div class="panel">
                          <header class="panel-heading">
                            <div class="panel-actions"> <button class="btn  waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
                            <h3 class="panel-title" id="dtName">dt_Ebay</h3>
                          </header>
                          <div class="panel-body">
                            <div class="col-sm-12" id="tableBodydt_Ebay"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion__item js-accordion-item active"></div>
        <div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
          <div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
            <label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
          <div class="accordion-body js-accordion-body">
            <div class="accordion-body__contents">
              <div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
                <div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
                  <div class="modal-dialog modal-simple">
                    <div class="modal-content">
                      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                      <div class="modal-body table-responsive">
                        <div class="panel">
                          <header class="panel-heading">
                            <div class="panel-actions"> <button class="btn  waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
                            <h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
                          </header>
                          <div class="panel-body">
                            <div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion__item js-accordion-item"></div>
        <div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
          <div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label>            tc_ExploreAmazon</div>
          <div class="accordion-body js-accordion-body">
            <div class="accordion-body__contents">
              <div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
                <div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
                  <div class="modal-dialog modal-simple">
                    <div class="modal-content">
                      <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
                      <div class="modal-body table-responsive">
                        <div class="panel">
                          <header class="panel-heading">
                            <div class="panel-actions"> <button class="btn  waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
                            <h3 class="panel-title" id="dtName">dt_Amazon</h3>
                          </header>
                          <div class="panel-body">
                            <div class="col-sm-12" id="tableBodydt_Amazon"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion__item js-accordion-item"></div>
      </div>
      <br>
      <button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
    </div>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

Implement the jquery hidden attribute to determine if an element is concealed

if ($('#testElement').is(':visible')) {
  // Write your code here
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract the JSESSIONID and generate a new Cookie using AngularJS

Currently, I am utilizing a Web RESTful API from my client within AngularJS. app.controller('LoginController', [ '$http', '$cookies', function($http, $cookies) { this.credentials = {}; this.http = $ ...

javascriptangularjshttpcookies

Repetitive bouncing in a trampoline leads to the error message "Call stack has reached maximum size"

I have been delving into the world of blockchain and experimenting with a simple implementation of "proof of work". Proof of work: export function mineBlock(difficulty: number, block) { const prefix = Array(difficulty + 1).join("0"); function mine(b ...

javascriptnode.jsrecursionfunctional-programmingtrampolines

Guide to exporting several Chart.JS graphs to a PDF document with each graph on a separate page

I am currently utilizing the JavaScript code provided below to generate a pdf file containing multiple charts. However, all the charts are being placed on a single page. My inquiry is regarding how I can customize the code to have each chart on its own sep ...

javascriptpdfcanvas

`The universal functionality of body background blur is inconsistent and needs improvement.`

I've developed a modal that blurs the background when the modal window is opened. It's functioning flawlessly with one set of HTML codes, but encountering issues with another set of HTML codes (which seems odd considering the identical CSS and Ja ...

javascripthtmlcssarraysbootstrap-4

Illumination scope for directional lights in three.js

In the world of three.js, calculating shadows for directional lights involves setting a range based on a bounding box that extends from the light source. This means that if I want to limit how far shadows are rendered, I need to adjust the bounding box geo ...

javascriptthree.js

Follow us text placed in front of social sprite images all aligned on the same line

Is there a way to align the Follow Us text with sprite images? Check out this jsfiddle link for more details! <ul class="social_Emp">&nbsp;&nbsp;&nbsp;Follow us: <li class="Emp_twitter"><a href="{if $userInfo.TwitterPage} {$u ...

css

Error message: RefererNotAllowedMapError - Google Maps API has encountered an issue with

I've integrated the Google Places API into my website to display a list of addresses, but I'm encountering the error detailed below. Encountered the following error when trying to use Google Maps API: RefererNotAllowedMapError https://developers ...

javascriptjqueryangularjsgoogle-mapsautocomplete

What is the best way to set up a side-opening feature in the UI design?

I am having trouble with the Amoclan shape transitioning to the next side. I need the transition to occur exactly as specified in the documentation, but for some reason it is still moving on to the next side. <html> <head> <script src=" ...

jquerycsssemantic-ui

What is the best method to extract information from JavaScript tables using Python and Selenium?

As a beginner in Python, JavaScript, and Web-Scraping, I am facing the challenge of extracting data from tables on a specific webpage (https://www.mcmaster.com/cam-lock-fittings/material~aluminum/) and saving it into a csv file. Initially, I attempted to ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

Unable to display an image element in fullscreen within a modal that is already fullscreen

I am facing an issue with my modal that is designed to occupy the full width and height of a browser. Inside this modal, there is an image enclosed within a div along with some other elements. My goal is to make the image go full screen in the browser, aki ...

javascriptjqueryhtmlcss

Encountering a problem with the scope of child_process in Node

When utilizing the child_process module in Node.js with the fork method, I am able to send data to a specific file and receive a response. However, I am not logging this data to the console after receiving it from the execution process. The code in first. ...

javascriptnode.jschild-process

How can I implement disabling buttons for specific IDs in React?

I'm currently developing an interactive quiz application with React that features multiple choice questions. I've implemented state management to track and increment the user's score when they select the correct answer option, but there&apos ...

javascriptreactjsstatereact-statedisable

What is the best way to send a group of objects to a server?

When working on my jsp page, I encountered a situation where I needed to include a JavaScript function that utilizes an Iterator. During each iteration of the process, it was necessary to store data in an object. Once all iterations were complete, the li ...

jquerystruts2

Animating images with Jquery

As a beginner in Javascript and Jquery, I am currently learning about image animation. However, I have encountered a question regarding moving an image from bottom left to top right within the window. Is there a more efficient way to achieve this compared ...

javascripthtmljquery

Order a portion of a JSON array according to another part of the same array

Having a json array that needs sorting in JavaScript. The EventName field should match the respective Age fields like 01-10 Days and 10-20 Days. [ {Age: "01-10 Days", EventName: "Invoice AP Review", Value: 1, ActiveInvoices: []} ,{Age: "01-10 Days", Even ...

javascriptarraysjson

Image failed to load

Issue Encountered in Browser Console: https://static.food2fork.com/pastaallavodkaa870.jpg.jpg 404 While attempting to display the image on the browser, I am uncertain if the problem lies within my code or with food2fork. Code from index.js: // Alway ...

javascriptnpm

Breaking down and analyzing XML information

I have data that I need to retrieve from an XML file, split the result, parse it, and display it in an HTML element. Here is a snippet of the XML file: <Root> <Foo> <Bar> <BarType>Green</BarType> &l ...

javascriptjqueryajaxxml

Please refer to the image located in the directory that is one level above the current location

My current setup includes an image located at images\a.jpg and a script in js\a.js. Both the images and js directories are under the www document root directory. Within the script a.js, I have the following code snippet: var provider_img = $(th ...

phpjquery

Passing data from jQuery to PHP and fetching information to display on a separate page

Currently, I have three pages: "index.php", "retrieve_search_forklift.php", and "search_forklift.php". I am attempting to pass the input "txtSearch" from index.php to retrieve_search_forklift.php using jQuery's $.post method. The goal is to execute a ...

phpjquery

Tips for retrieving nested data objects from a JSON API on the web

Below is the provided API link - I attempted to utilize this jQuery script in order to collect data for each state individually for my project. However, I am facing difficulties accessing the information with the code provided below. $.getJSON('http ...

javascriptjqueryhtmljsonapi