Elements according to active LI

Question

Hi I have a requirement where I need to hide the elements according to the active LI suppose I have 10 LI elements when I reach to 5th position I need to show only 3rd - 7th elements which means active - 2 and active +2 elements can be shown rest of them hides how is this possible in Jquery

Deepak Rawat · Answer

To hide elements based on the active list item (LI) position using jQuery you can use the .slice() and .hide() functions. Here's an example code snippet that demonstrates this: $(document).ready(function() { // Get all the LI elements var listItems = $('ul li'); // Attach click event handler to the LI elements listItems.click(function() { // Get the index of the clicked LI element var activeIndex = $(this).index(); // Calculate the start and end indices of the elements to show var startIndex = Math.max(0 activeIndex - 2); var endIndex = Math.min(listItems.length - 1 activeIndex + 2); // Hide all LI elements listItems.hide(); // Show the elements within the start and end indices listItems.slice(startIndex endIndex + 1).show(); }); }); you have a element containing the list items ( ). The code attaches a click event handler to each list item. When a list item is clicked it calculates the start and end indices of the elements to show based on the clicked item's index. Then it hides all list items and shows only the elements within the specified range using the .slice() function.