Utilize identical code across various jQuery instances

I'm having trouble using the same script in two different places with another div. Below that, I need to use the same script for two different types of filters. I tried copying the script and changing the class name, but it's still not working.

Check out the code on CodePen

View the live website here

$( document ).ready(function() {
    var $btns = $('.prdsiz-filter .button-group .btn').click(function() {
      if (this.id == 'all') {
        $('.prosize-sec > .inner-sectn').fadeIn(450);
      } else {
        var $el = $('.' + this.id).fadeIn(450);
        $('.prosize-sec > .inner-sectn').not($el).hide();
      }
      $btns.removeClass('active');
      $(this).addClass('active');
    });
    });
    $( document ).ready(function() {
    var $btnsm = $('.promob-filter .mobbtn-group .btn').click(function() {
      if (this.id == 'showall') {
        $('.promob-sec > .mobinner-sectn').fadeIn(450);
      } else {
        var $elm = $('.' + this.id).fadeIn(450);
        $('.promob-sec > .mobinner-sectn').not($elm).hide();
      }
      $btnsm.removeClass('active');
      $(this).addClass('active');
    });
});

Answer №1

To achieve this, it is necessary to utilize different IDs instead of class names.

$( document ).ready(function() {
var $btns = $('.prdsiz-filter #button-group .btn').click(function() {
  if (this.id == 'all') {
    $('.prosize-sec > .inner-sectn').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('.prosize-sec > .inner-sectn').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
});
});
$( document ).ready(function() {
var $btnsm = $('.promob-filter #mobbtn-group .btn').click(function() {
  if (this.id == 'showall') {
    $('.promob-sec > .inner-sectn').fadeIn(450);
  } else {
    var $elm = $('.' + this.id).fadeIn(450);
    $('.promob-sec > .inner-sectn').not($elm).hide();
  }
  $btnsm.removeClass('active');
  $(this).addClass('active');
});

});

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

Tips for modifying the value of a JSON object using Javascript or Jquery

I am looking to retrieve the value of a specific key, potentially accessing nested values as well. For example, changing the value of "key1" to "value100" or "key11" to "value111. { "key1": "value1", "key2": "value2", ...

Is there a way to verify if the JSON Object array contains a specific value or not?

Hi there! I'm new to JavaScript and I have a question. I need to determine whether the value of an Object is included in a JSON file or not. If it is, then I need to do one thing, otherwise I need to do something else. First, I am retrieving the JSON ...

Retrieve an integer value from an HTML form

I need to extract an integer value from an HTML form using Python. Here is the code I tried: form = cgi.FieldStorage() if not form.has_key("id"): error_pop("There is no id in this form","The format of the request is not correct") id = ...

Converting images to greyscale or transparency within a ReactJS component

I am exploring ways to transform an image into grayscale or make it transparent before using it as a background in ReactJS. Is there a way to achieve this in ReactJS? My current code snippet is shown below: <GridListTile> <img style={{ -we ...

There has been an unexpected error: TypeError - The function Item.replace does not exist in the autoComplete plugin

I am currently using the jQuery plugin autoComplete from , and I encountered an error while trying to implement their ajax request. The error message displayed is: item.replace is not a function at object.renderItem $.fn.autoComplete.defaults = { ...

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

Tips on managing multiple form data using ajax for php backend

<input type="text" value="2021-05-01" class="date" name="date"> <input type="text" value="10:00" class="starttime" name="starttime"> ...

What are some ways to optimize Ajax requests for improved speed when multiple identical requests are made on a single webpage?

When the webpage is loaded, a block is dynamically created using an Ajax call to retrieve data from another page. This structure is then populated and added to a specific DOM element. However, multiple Ajax calls during page loads are causing delays. Is ...

Create a web design where two HTML elements with full width are positioned to overlap each other,

I am facing a design challenge where I need sections to span the full width of the page, but the content is contained within an article. Additionally, there is an interactive aside that needs to float above the full-width sections. Both the article and as ...

Tips on customizing the appearance of mat-card-title within a mat-card

Is there a way to truncate the title of a mat card when it overflows? I tried using the following CSS: overflow:hidden text-overflow:ellipsis white-space: nowrap However, the style is being overridden by the default mat-card style. I attempted to use mat ...

Numerous hyperlinks leading to different products within the same image

https://i.sstatic.net/T7P4V.jpg I am looking for a solution to create clickable links on a picture that contains multiple items (3 in my specific case, as shown in the image above). Currently, I am using position:absolute to place links on each item, but ...

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

Display a preview of a CSV file in a datagrid after uploading

My goal is to upload a csv file to the backend and show a preview of the data on the same page without refreshing or reloading. I believe using AJAX is the way to achieve this. I am curious about how we can accomplish this with Ajax and jQuery in the cont ...

Express not receiving data from HTML form submission

Check out my HTML form below: <form method="post" id="registration-form" action="/register"> <div class="form-group"> <label for="UsernameRegistration">Username:</label> <input type="text" class="form- ...

Modifying the font style of a Flot bar chart

Issue I am facing a challenge with adjusting the small numbers displayed on top of a bar chart created using Flot. It seems like these numbers are generated through canvas, making it difficult for me to customize them to match the styles I have set for th ...

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

There seems to be an issue with the jQuery plugin on this demo page: If you access it using Firefox, you'll notice that the social sharing buttons are visible and functioning properly. However, in Chrome, there appears to be a peculiar CSS computatio ...

jQuery Ajax request encounters error when trying to access correct URL

I am facing a challenge while trying to access a REST Web Service from an HTML/JavaScript application. I have set up both the web application and the Web Service on Apache HTTPD 2.2 server. Interestingly, when I directly call the Web Service's GET met ...

What causes my Table header to vanish when filtering the data?

Exploring HTML and JavaScript $("#btn10").click(function() { $(".search-boxes").toggle() }), $("#comfilter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#communication_mode_table tr").each(function(index) { ...

Launch a Firebase app with a custom .com web address

Just starting out in the world of hosting. I have a project that involves: Front end: HTML, CSS, JQuery Back end: Firebase Currently, I am using Firebase to store user data on my website. My goal is to host the site as abc.com However, when I contacted ...

What is the recommended way to update radio button labels using jQuery?

Currently I am working with jQuery version 3.5.1 and have the following HTML code snippet. <form> <div><input type="radio" id="radio0" name="choice" >Option 1</div> <div><input type=&qu ...