Toggle Text Color with Javascript

Question

I am creating a menu in php running off of input from a JSON file. The issue i'm running into is that i want the title to change color to green once they click anywhere in the div class "menu-item". Once the color is green I would also like for them to be able to click it and have it return to it's original state. I understand i need to utilize javascript or Jquery for this option but couldn't find it in any documentation. I feel like I'm missing something small and have looked all over but haven't been able to figure it out. any help is appreciated.

    foreach ($obj as $menu_item) {
      echo '<div class="menu-item">';
      echo '<img class="food-item" src="'.$menu_item->{'image-url'}.'"><br/>';
      echo '<p class="title" onclick="changeColor("title"); return false;">'.$menu_item->name.'</p><br/>';
      echo '$'.$menu_item->price.'<br/>';
      echo $menu_item->Description.'<br/>';
      echo '</div>';
    }

use jquery toggle - api.jquery.com/toggle

Pedro Lobito
– Pedro Lobito

2016-05-06 23:24:33 +00:00
Commented May 6, 2016 at 23:24 — Pedro Lobito
– Pedro Lobito, Commented May 6, 2016 at 23:24

Adam Buchanan Smith · Accepted Answer · 2016-05-06 23:17:56Z

1

Jquery toggle will do it for you, see fiddle: https://jsfiddle.net/c259LrpL/24/

  $(".menu-item").click(function() {
    $(this).toggleClass("red");
  });

CSS example:

.menu-item {
  background-color: blue;
  color: white;
}

.menu-item.red {
  background-color: red;
  color: blue;
}

answered May 6, 2016 at 23:17

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggle Text Color with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related