Selecting the choices within a live filter is ineffective

I've been attempting to replicate a filter similar to the one showcased here.

In an HTML file, I wrote some code that perfectly mimics the appearance. However, the JavaScript functionality is not working as expected. When I click on a different option from the default one, nothing happens.

$(document).ready(function() {

  $("#filter-bar li").click(function() {
    $("#filter-bar li").removeClass("active");
    $(this).addClass("active");
    $("#filter-bar").removeClass().addClass($(this).attr("data-target"));
  });

})
body {
  background-color: #eee;
  margin: 0;
  padding: 0;
  font-family: Tahoma;
}

h2 {
  text-align: center;
}

#filter-bar {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 36px;
  display: inline-flex;
}

#wrapper-filter {
  background-color: #fff;
  width: 570px;
  height: auto;
  margin: 30px auto;
  border-radius: 30px;
  box-sizing: border-box;
}

#filter-bar li {
  width: 190px;
  background-color: transparent;
  text-align: center;
  list-style-type: none;
  z-index: 10;
  cursor: pointer;
  font-family: Open Sans, sans-serif;
  font-weight: 100;
  font-size: 15px;
  line-height: 36px;
}

.pill {
  position: absolute;
  width: 190px;
  height: 38px;
  background-color: #39c;
  border-radius: 30px;
  color: #444;
  z-index: 10;
  border: 5px solid #eee;
  box-sizing: border-box;
}

.filter-option {
  transition: color 500ms;
}

#filter-bar.option-1 .pill {
  margin-left: 0px;
  transition: margin-left 200ms ease;
}

#filter-bar.option-2 .pill {
  margin-left: 187px;
  transition: margin-left 200ms ease;
}

#filter-bar.option-3 .pill {
  margin-left: 380px;
  transition: margin-left 200ms ease;
}

.option-1.active,
.option-2.active,
.option-3.active {
  color: #fff;
  transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Animated filter selector</h2>

<div id="wrapper-filter">

  <ul id="filter-bar">
    <span class="pill"></span>
    <li class="filter-option option-1 active" data-target="option-1">Books</li>
    <li class="filter-option option-2" data-target="option-2">Shoes</li>
    <li class="filter-option option-3" data-target="option-3">Toys</li>
  </ul>

</div>

It seems like the JavaScript script isn't being recognized at all, resulting in no action when it should be changing elements on the page. Perhaps it wasn't placed correctly? As a frontend novice, I'm unsure of what exactly went wrong. Can anyone offer assistance?

javascripthtmlcss

Answer №1

Your code is functioning correctly, but you forgot to include jQuery. Make sure to insert the following script in the head section of your HTML file: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

By adding this script, you will incorporate the jQuery library into your project, providing you access to a variety of new features. For more information, refer to the documentation here

$(document).ready(function() {
  $("#filter-bar li").click(function() {
    $("#filter-bar li").removeClass("active");
    $(this).addClass("active");
    $("#filter-bar").removeClass().addClass($(this).attr("data-target"));
  });
})
body {
  background-color: #eee;
  margin: 0;
  padding: 0;
  font-family: Tahoma;
}

h2 {
  text-align: center;
}

#filter-bar {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 36px;
  display: inline-flex;
}

#wrapper-filter {
  background-color: #fff;
  width: 570px;
  height: auto;
  margin: 30px auto;
  border-radius: 30px;
  box-sizing: border-box;
}

#filter-bar li {
  width: 190px;
  background-color: transparent;
  text-align: center;
  list-style-type: none;
  z-index: 10;
  cursor: pointer;
  font-family: Open Sans, sans-serif;
  font-weight: 100;
  font-size: 15px;
  line-height: 36px;
}

.pill {
  position: absolute;
  width: 190px;
  height: 38px;
  background-color: #39c;
  border-radius: 30px;
  color: #444;
  z-index: 10;
  border: 5px solid #eee;
  box-sizing: border-box;
}

.filter-option {
  transition: color 500ms;
}

#filter-bar.option-1 .pill {
  margin-left: 0px;
  transition: margin-left 200ms ease;
}

#filter-bar.option-2 .pill {
  margin-left: 187px;
  transition: margin-left 200ms ease;
}

#filter-bar.option-3 .pill {
  margin-left: 380px;
  transition: margin-left 200ms ease;
}

.option-1.active,
.option-2.active,
.option-3.active {
  color: #fff;
  transition: color 200ms;
}
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <h2>Animated filter selector</h2>
  <div id="wrapper-filter">
    <ul id="filter-bar">
      <span class="pill"></span>
      <li class="filter-option option-1 active" data-target="option-1">Books</li>
      <li class="filter-option option-2" data-target="option-2">Shoes</li>
      <li class="filter-option option-3" data-target="option-3">Toys</li>
    </ul>
  </div>
</body>
</html>

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

Creating two tables in JavaScript and styling them with separate CSS designs

I am in the process of creating two tables dynamically using JScript. Instead of using the traditional method of separating them with assigned tags in HTML, I have approached the creation of the first table in a different way: function makeCells() { v ...

javascripthtmlcsshtml-table

Ways to expand the div to fit the width of the text after it has been wrapped

I need a continuous underline to stretch across the remaining width after the text wraps in a table cell. Here is the desired effect: https://i.sstatic.net/XNNyj.png If the text wrapping changes, the underline width should adjust accordingly. This is w ...

htmlcss

Adding a new HTML element to each ng-repeat iteration in AngularJS

Can you help me find a solution for inserting a <p> tag in the DOM for each item in my ng-repeat loop? Here is the array of objects I am using for the ng-repeat: $scope.items = [ {name: "john", paragraph:"<p>hi, im john</p>"}, {nam ...

javascripthtmlangularjsangularjs-ng-repeat

Connection between mapStateToProps and mapActionsToProps failing to trigger in react component

I am facing an issue with my component (SearchFilter.js) where the connect method is not triggering mapStateToProps and mapActionsToProps on export. The problem is that mapStateToProps is not firing at all -- no props (neither state nor actions) are showi ...

javascriptreactjsreduxreact-redux

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

I am facing an issue with my responsive menus on a webpage, similar to the example provided in the jsfiddle link below. Currently, when one menu is open and I click on another, both remain open. How can I modify the JavaScript code so that when one menu op ...

javascriptjquerycssresponsive-design

What causes the difference in behavior of 'flex-grow' between Chrome and Firefox/Edge?

Trying to create a webpage with a fixed height 'header' div followed by a 'content' div below it. The content div contains various other divs with actual page content, generating dynamically through PHP resulting in varying heights for ...

htmlcssflexbox

Verify your identity using Google reCaptcha during Passport authentication

I am currently working on integrating google reCaptcha into my signup form's back-end, which already includes passport authentication. The code I have so far looks like this: app.get('/signup', function(req, res) { // render the ...

javascriptnode.jsexpresspassport.jsrecaptcha

The act of composing a message for the alert

Can you provide some assistance with this particular issue? I am attempting to input text into a prompt alert, however, my current method involving switch_to.alert and send_keys is not working as intended. base_URL = "https://www.seleniumeasy.com/tes ...

javascriptpythonseleniumalert

How can I annihilate the reveal effect in Foundation 6?

I've encountered a problem with initializing reveal in Foundation 6. Specifically, I'm attempting to create a new instance for #menu on medium and small screens and remove it on large screens. However, I'm running into issues removing the da ...

javascriptjquerymodal-dialogzurb-foundationcustom-data-attribute

What is the best way to trigger two functions with an 'onPress' event in React Native?

I am encountering some issues while trying to call two methods on the onPress event in the code below. How can I achieve calling one method for starting chatting and another for changing images during the onPress event? The first method is for initiating ...

javascriptandroidreactjsreact-native

Learn how to dynamically import and load components in VueJS while rendering a list

I am currently rendering a list. <div v-for="msg in messages"> <div v-if="msg.type==='component'"> <component v-bind:is="getComponent(msg.component)" :data="msg.data" :text="msg.text"></component> </div> ...

javascriptvue.jscomponents

Is it necessary to utilize body-parser in our code?

In my research, I've noticed that many tutorials recommend using both express.json and bodyParser.json middleware. But aren't they essentially performing the same function? ...

javascriptnode.jsexpressbody-parser

Conceal a div element using a button through JavaScript

I've been scouring various online resources for solutions, including Stack Overflow and W3Schools, but I haven't had any luck so far. Here's a simplified version of my current code: <script language="javascript"> function remove() ...

javascripthtmlblockdisplay

Ways to configure an Express.js server file with the router path set as the root directory

I have a directory structure set up like this root private js css index.html app.js privateRouter.js ... Within my index.html, I am referencing the js and css files using relative paths: <link rel="stylesheet" href="css/index.css" ...

htmlnode.jsexpress

Adjusting height in CSS can be done dynamically based on the content within

Currently, I am working on a project where I need the submenu to adjust based on content. The issue is that right now, the submenu has a fixed capacity of 4 items. For example, when you click on 'sale', it displays 4 submenu items perfectly. Howe ...

htmlcss

The integration of VueJS with Axios and the Google Maps API

Currently following [this][1] guide to develop a Google Map and now I am looking to execute a GET request with Axios: axios.get("http://localhost:8080/mapjson").then(function(response) { }) in order to integrate the information from my JSON file into the ...

javascriptgoogle-mapsvue.jsaxios

Laravel Ajax 419 Error Occurring in Production Environment, Yet Absent in Local Development, with No Trace in /storage/logs/laravel

I encountered a 419 Error code while submitting my AJAX request in my project. This error is related to the CSRF Token not being passed or invalid. Recently, I implemented a "maintenance mode" on my project that restricts access to the front end by displa ...

javascriptphpajaxlaravellaravel-5

Can you guide me on how to activate the pickadate.js calendar above the input field?

Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...

csshtmlbootstrap-4pickadate

The value of req.headers('Authorization') has not been defined

I'm experiencing difficulty with my code as the token is coming back as undefined. Here is the frontend section: export const fetchUser = async (token: any) => { const res = await axios.post('/user/getuser', { headers ...

javascriptreactjstypescript

Is the NodeJS rmdir function experiencing issues specific to LINUX?

Currently, I have a NodeJS script section that runs on my Windows 10 machine with the latest Node version and another version on my CentOS8 Linux webserver. The code executes as expected on Windows but throws an error when running on Linux at this specific ...

javascriptnode.jsnpmbackend