1

I am trying to create an on-click line-through for a bunch of words (item #1, item #2, item #3). I want it to be line-through when clicked, and if the same word is clicked a second time the line-through should disappear again.

<p>
Item #1<br>
Item #2<br>
Item #3<br>
</p>

I would prefer css.

Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
micks88
  • 57
  • 1
  • 10

1 Answers1

1

Each item text should be wrapped by a span to change its properties.

Here is a simple demo using JQuery:

$("#parg").find("span").click(function(){
     $(this).toggleClass("line-through");
});
.line-through{
     text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="parg">
<span>Item #1</span><br>
<span>Item #2</span><br>
<span>Item #3</span><br>
</p>
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
  • This works on here and in JSFiddle, but when I add it to my own website it does not. Do you have any idea why? Anything in particular to pay attention to when adding this code? – micks88 Sep 01 '20 at 19:56
  • @micks88 make sure to reference ``JQuery``. Add this ```` to the ``head`` in the ``html`` file. – Majed Badawi Sep 01 '20 at 19:58
  • It still does not work unfortunately, but that is my problem as I can tell it is working here :) – micks88 Sep 02 '20 at 06:43