Master the art of directing your attention to a list element with ease using the tab function and jQuery

I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% opacity and only the first question is highlighted at 100%. However, when I move on to the next question, it remains at 20% opacity until I click on it or its corresponding input field. How can I ensure that the field or list element becomes active and displays at 100% opacity? Here's what I have implemented so far:

<ul>
        <li class="main" id="first-element" role="tab" data-toggle="tab">
            <div class="question">This is my first question</div>
            <input type="text" placeholder="First Answer">
        </li>

        <li class="main" role="tab" data-toggle="tab">
            <div class="question">Second Question</div>
            <input type="text" placeholder="Second Answer">
        </li>

        <li class="main" role="tab" data-toggle="tab">
            <div class="question">Third Question</div>
            <input type="text" placeholder="Third Answer">
        </li>
    </ul>

    <script>
        $(document).ready(function() {
            $('li.main').fadeTo(1000, 0.2);
            $('li#first-element').fadeTo(1000, 1.0);
        });

        $('li.main').click(function() {
            // Make all list elements (except this) transparent
            $('li.main').not(this).stop().animate({
                opacity: 0.2
            });
            // Make this opaque
            $(this).stop().animate({
                opacity: 1.0
            });
        });
    </script>
    

Thanks to your guidance, here is the working solution on JSFiddle: https://jsfiddle.net/urfwap4n/

Answer №1

To address this issue, I have implemented the use of the keyup event. Here is a snippet of code that might be helpful to you:

var toggleVisibility = function(element){
    $('li.main').not(element).stop().animate({
        opacity: 0.2
    });
    
    // Make the selected element fully visible
    $(element).stop().animate({
        opacity: 1.0
    });
}

$('li.main').click(function() {
    toggleVisibility(this);
});

$('li.main').on('keyup',function(event){
    var keyCode = event.keyCode || event.which;
    if(keyCode == 9) { // Check for Enter key
        toggleVisibility(this);
    } 
});

Here is a link to a fiddle demonstrating this script.

Answer №2

Utilizing the specified function

$('li.main').click(function() { ...

consider experimenting with

$('li.main').on("focus", function() { ...

In addition, the on method enhances memory efficiency compared to simply utilizing the "focus" function

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

When working with AngularJS and Karma-Jasmine, it is recommended to flush the $httpbackend only when there are pending requests present

Can I use $httpbackend.flush(); only when there are pending requests? This way, I can avoid receiving: Error: Unflushed requests: 1,2,3,...,n Or Error: No pending request to flush! ...

Utilizing jQuery and AJAX to dynamically include multiple PHP pages

My webpage contains a div tag similar to this structure: <div class="ajax-load"> <!-- First.php: jquery-slider-1 jquery-widget-1 second.php: jquery-slider-2 jquery-widget-2 --> </div> There is also a ...

Ways to verify if an email has been viewed through the client-side perspective

How can I determine if an email has been read on the client side using PHP? I need to verify if emails sent by me have been opened by recipients on their end. Additionally, I would like to extract the following details from the client's machine: 1. ...

How to Insert JSON into React Component's Attribute?

I am struggling with setting the value of a React component using JSON in the attribute. I want to concatenate a letter or word, but it doesn't seem to work. Is there a correct way to combine strings within a Component's attribute? In this case, ...

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

Creating content inside a list

When aiming for semantic code, I am currently debating the best way to write text within a list item. Should it be done as follows: <li> <p>This is my text</p> <p>This is another bit of text</p> </li> or <l ...

Show PHP results in an Ajax modal box

Hey everyone! I'm new to this and had some code written for me by a programmer. Unfortunately, I can't reach out to them for help anymore. I have a calculator that shows results (generated by calc.php) without refreshing the page. Check out the ...

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

How to determine the presence of 'document' in Typecsript and NextJS

Incorporating NextJS means some server-side code rendering, which I can manage. However, I'm facing a challenge when trying to check for set cookies. I attempted: !!document && !!document.cookie as well as document !== undefined && ...

Node.js is raising an error because it cannot locate the specified module, even though the path

Currently in the process of developing my own npm package, I decided to create a separate project for testing purposes. This package is being built in typescript and consists of a main file along with several additional module files. In the main file, I ha ...

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

SQL - Extracting Information from HTML in a Column

I have a column named "Content". Within this column, there is HTML code containing various data. My task is to extract specific information from this HTML code and split it into five different columns: "Name", "Surname", "Email", "Telephone", and "Message" ...

Why is it displaying undefined even though there is data stored in Firebase?

I am experiencing an issue where the datatable row is displaying "undefined" instead of the data from my Firebase database. Even when I tried inserting random data into the HTML file for the datatable, it still shows undefined. Here is a link to My Datata ...

Is it possible for an object to be null even when its type is object

There's an issue that I can't seem to replicate. Personally, I'm not experiencing any errors but bugsnag reports that some users are encountering them. Take a look at snippet line 6 for more information. let lang = this.$store.state.lang ...

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Looking for a CSS Solution: Is there a way to achieve element.scrollLeft functionality in CSS without using javascript? I want to pre-scroll a scrollable container. Situation Overview: I have a scrollable container that houses various items. Some instanc ...

The re-rendering of a functional component utilizing React.useCallback and React.memo() is occurring

I was delving into React concepts and eager to experiment with some new things. Here are a few questions that crossed my mind: Does every functional child component re-render when the parent state changes, even if it doesn't have any props? It seems ...

Utilize CSS Grid to adjust the size of an image

Hi there! I'm currently working on resizing an image using a CSS grid layout. Here's the CSS code I have so far: /* Reset */ * { padding: 0; margin: 0; } html { height: 100%; background-image: url("/assets/images/background.p ...

The concatenation of Ajax results appears to append to the existing data

My ajax function handles uploading comments to a form, which then returns the same string. If successful, the comment is added to a comment box and the input text is cleared. The issue arises when a user adds another comment; the new comment is appended w ...

Avoiding the use of "echo" in PHP can prevent unintended characters, especially the one created by the "¯

How can I prevent an issue where the '&macr' in a URL variable string creates the ¯ characters when echoed? echo "direct=1&closeBrowser=1&savelog=log.txt&storage=xfile&macrfile=klanta\test.html"; ...