Very simple toggleClass not working

Question

So I have some really simple code but it's not working.

$(function() {
 $("#tren").click(function() {
  $("#trens").toggleClass("show");
 });
});

.show {
    color: "red";
}

<ul>
    <li id="tren">Some text</li>
</ul>
<div id="trens">
    <p>Other text</p>
</div>

'Other text' is supposed to get red, but it doesn't . What am I doing wrong?

Answer 1

Just remove the quotes in your CSS. Run the snippet below to see it work.

$(function() {
 $("#tren").click(function() {
  $("#trens").toggleClass("show");
 });
});

.show {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li id="tren">Some text</li>
</ul>
<div id="trens">
    <p>Other text</p>
</div>

Answer 2

All you need to do is take the word 'red' out of the parentheses.

.show {color: red;}