Changing the color of an element on click using jQuery's .css() method,

There is a table and I am using fadeToggle on the list to hide and show the table. The background of the list is green color, but I want to change the list color when hiding the table and revert it back to green when clicking to show the table. Unfortunately, my code is not working as expected.

<div class="main">
        <ul class="top_menu" >
            <li class="orderList" id="starter_li">Starter</li>
            <li class="orderList" id="soup_li"> Soup</li>
            <li class="orderList" id="seafood_li">Seafood</li>
            <li class="orderList" id="return_li">Return All</li>
        </ul>
        <div id="middleBox">
            <table class="food_table" id="starters" style="width:100%">
                <tr></tr>
                <tr>
                    <td>S1</td> 
                    <td>Starter1<br>
                    <td>10</td>
                </tr>
        <table class="food_table" id="soups" style="width:100%">
                <tr>
                    <td>1</td>
                    <td>Soup1</td>
                    <td>4</td>
                </tr>   
            </table>
         <table class="food_table" id="seafood" style="width:100%">
                <tr>
                    <td>2</td>
                    <td>seafood1</td>
                    <td>7</td>
                </tr>   
            </table>

jQuery

    $(document).ready(function(){
        $("#starter_li").click(function(){
        $("#starters").fadeToggle(500);
        $(this).css("background-color","white");
        $(this).css("color","#05FF0A");

    });
        $("#soup_li").click(function(){
        $("#soups").fadeToggle(500);
        $(this).css("background-color","white");
        $(this).css("color","#05FF0A");
    });
        $("#seafood_li").click(function(){
        $("#seafoods").fadeToggle(500);
        $(this).css("background-color","white");
        $(this).css("color","#05FF0A");
      });
        $("#return_li").click(function(){
                $(".food_table").fadeIn(500);
        });


            $('.orderList').click(function(e){
            var color = $(this).css('background-color');
            if (color == 'white')
             $(this).css('background-color','#05FF0A');
         });

});

Answer №1

Experiment with

replacing

if (color == 'white')

with

if (color == 'rgb(255, 255, 255)')


Enhanced

Inserted <tbody></tbody> around <tr></tr> elements ; completed closing of </table> tags ; changed "s" to #seafood for element id ; revised click events to two , leveraging similarities in selectors within html


$(document).ready(function() {

  $(".orderList").not("#return_li").on("click", function(e) {
    var elem = $(this);
    $("#" + this.id.slice(0, -3) + "s").fadeToggle(500);
    var color = elem.css('background-color');
    console.log(color);
    if (color === 'rgb(255, 255, 255)') {
      elem.css("background-color", "#05FF0A")
    } else {
      elem.css("background-color", "rgb(255, 255, 255)")
    }
  });

  $("#return_li").click(function() {
    $(".food_table").fadeIn(500);
    $(this).siblings().each(function() {
        $(this).css("background-color","rgb(255,255,255)")
    })
  });

});
.orderList {
  background-color: white;
  color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="main">
  <ul class="top_menu">
    <li class="orderList" id="starter_li">Starter</li>
    <li class="orderList" id="soup_li">Soup</li>
    <li class="orderList" id="seafood_li">Seafood</li>
    <li class="orderList" id="return_li">Return All</li>
  </ul>
  <div id="middleBox">
    <table class="food_table" id="starters" style="width:100%">
      <tbody>
        <tr></tr>
        <tr>
          <td>S1</td>
          <td>Starter1
            <br>
            <td>10</td>
        </tr>
      </tbody>
    </table>
    <table class="food_table" id="soups" style="width:100%">
      <tbody>
        <tr>
          <td>1</td>
          <td>Soup1</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    <table class="food_table" id="seafoods" style="width:100%">
      <tbody>
        <tr>
          <td>2</td>
          <td>seafood1</td>
          <td>7</td>
        </tr>
      </tbody>
    </table>

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

In NextJs SSR, external components from a different package do not inherit styles when applied

I have incorporated an external react component into my Next.js app code. Here is a snippet of how the component appears: <AppBar className={clsx(classes.header)}> </AppBar> export const header = makeStyles((theme) => ({ header: { ...

What is the best way to adjust the background color of Material UI's theme based on different screen sizes?

Having trouble replacing hard-coded CSS breakpoints with Material UI theme settings. @media screen and (min-width: 0px) and (max-width: 400px) { body { background-color: red; } } @media screen and (min-width: 401px) and (max-width: 599px) { body { ...

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

Creating a zigzag pattern with a linear gradient in CSS

When attempting to create a background color for my body element using linear gradient, I noticed that it resulted in a zigzag effect I experimented with the following code: Body{ background: linear-gradient(45deg, Blue 50%, red 50%) } The outcome wa ...

Ways to apply the margin-top property to create space between an input field and

I have been experimenting with Vue and I created a simple code snippet. <template> <div> <input /> <span class="span-text">Hi</span> </div> </template> // index.css .span{ margin-top: 3px; } I a ...

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

How can I create the effect of text changing color automatically after a specified time period has elapsed

I am currently dealing with a timer that is functioning properly, but I have a specific CSS inquiry. Essentially, what I would like to achieve is when the timer hits 30 seconds, I want the numbers to change to red color. $(function () { var $startTimer = ...

Do not apply styling to a particular page in CSS and HTML

Utilize the teachable.com platform and take advantage of their code Snippets feature (refer to attached photo #1) https://i.stack.imgur.com/dW1lB.png I inserted the following code: div { direction: rtl; } To modify the website's direction to be ...

When a user manually updates an input, only then will the jQuery change event be triggered

Is it possible to differentiate between user-initiated changes and manual modifications in JavaScript? $('#item').change(function() { alert('changed!'); }); There are times when I need to trigger the change event artificially wit ...

Tips for automatically incorporating animation upon page initialization

I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...

The background color is showing the wrong shade

So, I recently created a simple HTML5 website and decided to set the background-color of the header div to #3D7D99. However, when I view it in the browser, it appears as #35728E. Can anyone explain what might be causing this discrepancy? UPDATE: Just to c ...

Turn off and then turn on user input without exiting the textarea

I've been working on a small project that requires me to enable and disable text input in a textarea using key commands, similar to Vi/Vim's insertion and command modes. However, I'm struggling to find an elegant solution. Disabling the tex ...

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

Navigate to the following slide by clicking on BxSlider

Looking to enhance the navigation on my slideshow by using the slide itself as a next button, instead of relying on traditional prev/next controls. Although it seems like a simple feature to implement, I'm struggling to make it work. This is my curre ...

What causes the unexpected string error in jQUERY?

Issue An unexpected string error is appearing in my code, even though I can't identify any mistakes. Here is the snippet of my code: $(document).ready(function() { var search = $("#search"); $("#bla").click(function() { if ...

Sliding left and right with the help of jQuery

Hey there! I'm currently working on designing a sliding menu bar that can move left or right based on user interaction with arrow buttons. When the user hovers over the right arrow, the navigation bar smoothly slides from right to left until it reache ...

Clickability of links on an element is lost when it is positioned behind another element that is fixed

I can't seem to figure out why the green menu is hidden behind the white header, making its links unclickable. It's necessary for the layout of the page, but it's causing this issue. The white header has a position: fixed; attribute. The gr ...

Tips on obtaining checkbox value in an AJAX request

I need to retrieve the value of a checkbox using Ajax in order to store it as a user preference in the database. This task is new to me, and I'm feeling a bit overwhelmed. Here is my JavaScript file: $(document).ready(function() { E.accounts.chang ...

Initiating CSS3 animations when the display changes

In an attempt to incorporate CSS3 animations for fading elements in during page load, I am faced with the challenge of setting the element to display: none; and then back to display: block;. My goal is to exclusively apply the CSS3 animation upon the init ...