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

How can you create an accordion menu that expands when a button is clicked?

Is there a way to make an accordion menu open when the 'More' button is clicked? I've tried, but it always starts in its expanded state and collapses when the button is clicked. What I really want is for the accordion to be closed initially ...

javascriptjquerycss

ReactiveJS - Adding elements to an array and encountering the error of undefined

In two separate JavaScript files, I have 2 arrays declared as shown below: Index.JS: const [product, setProduct] = useState([]); const [item] = useState([ { name: 'Blue Dress', Image: '/static/media/Dress.1c414114.png', Pr ...

javascriptreactjs

The event for 'deviceready' in Cordova is not getting triggered when placed inside the angular .run block

Recently, I've been facing difficulties in getting 'deviceready' to register within AngularJS. It was functioning properly earlier, so I'm puzzled about what might have altered. If I trigger 'deviceready' from a global addEve ...

javascriptangularjscordova

Placing text beside an image

I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...

phphtmlcss

What is the best way to access a database connection throughout an entire node.js application?

In my application's app.js file, I establish a connection to mongodb using the monk module. var express = require('express'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var mong ...

javascriptnode.jsmongodbexpressmonk

Switch between showing and hiding a div by clicking on an image

Currently, I am experimenting with the toggle div function and utilizing images as triggers for toggling. For instance, when a div is closed, an image of a "plus" sign indicates to the user that it can be expanded, and vice versa for compressing the div. T ...

javascripthtmljqueryjquery-uijquery-events

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

javascripthtmljquery

attr() function malfunctioning when applied to dynamically added images using Jquery

I'm encountering an issue where I am unable to retrieve the src attribute of an image that I created using the .append method in jQuery. Strangely, I can obtain the src when directly typing the element in the HTML file but not when appending it. Essen ...

jquery

The triggering of routing in Next.js is not established by useEffect

I'm facing an issue with my Next.js dynamic page that uses routing based on steps in the state. The route is supposed to change whenever a step value changes, like from null to "next" or back. However, the useEffect hook doesn't seem to be reacti ...

javascriptreactjstypescriptnext.js

How can you use jQuery to remove a class from an element after a specified period of time?

After updating a record in the database, I plan to make modifications using an AJAX request. Once that is done, I will dynamically add a class to the rendered div by utilizing the addClass method. The class being added (we'll refer to it as colored) c ...

javascriptjqueryfadeout

Sort by label using the pipe operator in RxJS with Angular

I have a situation where I am using an observable in my HTML code with the async pipe. I want to sort the observable by the 'label' property, but I'm not sure how to correctly implement this sorting logic within the pipe. The labels can be e ...

javascripthtmlangulartypescriptrxjs

What could be causing jQuery to overlook dynamically loaded jQuery Mobile buttons?

While working with a web page that uses jQuery Mobile, I utilized Ajax to load the following HTML content. The key detail is the presence of the onButton class attached to the anchor tag. <a class="onButton ui-btn ui-btn-inline ui-btn-corner-all ui-sha ...

jqueryajaxjquery-mobile

What is the best approach to slowly transition a value to a different one over a set period of time?

if(!isWalking) { isWalking = true; var animation = setInterval(function () {$player.css({'left': "+="+boxSize/25})}, 10); setTimeout(function(){clearInterval(animation)},250); setTimeout(function(){isWalking = false},250); ...

javascriptjquery

How can I resize several images to fit seamlessly within a div container?

Looking for a smart method to resize multiple images to fit neatly inside a fixed-size div? I've considered using JavaScript to calculate the div's width, dividing it by the number of images, and resizing them equally while maintaining their asp ...

javascriptimagehtmlinlinescale

React/Redux - Issue with rest operator functionality in component

Here is the initial state I am working with: const initialState = { selectedGroup: {}, groups: { rows: [], total: null }, offset: 0, range: 15, loading: false, error: null } Within a reducer function, I have this case for successful ...

javascriptreactjsreact-redux

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

How can you apply a class to a different element by hovering over one element?

Is there a way to darken the rest of the page when a user hovers over the menu bar on my website? I've been playing around with jQuery but can't seem to get it right. Any suggestions? I'm looking to add a class '.darken' to #conte ...

javascriptjqueryhtmlcss

The modules exporting lack the necessary context for this

I'm not entirely happy with how the question is phrased. Feel free to suggest any improvements. Also, please understand that my frustration might be due to a mix of ignorance and annoyance which could result in inaccurate assessments of the issue. I a ...

javascriptvue.jsvuex

Utilizing MVC6 to send both a CSV file and a string to a controller via Ajax

I'm encountering an issue that involves sending a CSV file along with the value of a string variable back to the controller. Individually, I've been successful in sending the file via the form's submit button and the string variable via aja ...

jqueryasp.netajax

`vuetify sidebar with a nested menu``

I am trying to enhance the vuetify sidebar menu I created by adding a submenu to a specific title. Despite editing the code and data as shown below, I am unable to see any changes reflected. Below is the code snippet: <v-list flat class="mt- ...

javascriptvue.jsvuejs2vuetify.js