1

I am trying to toggle the display of an :after pseudo-element (ie.to show/hide it) using jQuery. I successfully toggled the display of a div, but want to do this now with :after.

The :after is being used to create the arrow on the box.

My attempt can be seen here: http://jsfiddle.net/beechboy707/7um9knxt/1/

Here is an extract from it showing the jQuery which is supposed to relate to the CSS selector:

$("#supportus-button-1").click(function () {
$(".supportus-button:after").toggle();
});
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
BEECHBOY707
  • 45
  • 1
  • 2
  • 6
  • 2
    This may be useful [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after/21709814#21709814) – Marc Baumbach Aug 24 '14 at 10:24
  • The term you're looking for is "pseudo-element". jQuery supports a selector syntax not unlike CSS, but it does not support pseudo-elements (as in the link above). – BoltClock Aug 25 '14 at 09:14

1 Answers1

3

I think the easiest approach here is to use CSS classes to limit the scope where the :after rule is applied:

.supportus-button:not(.clicked):after { ... }

Here's an updated fiddle: http://jsfiddle.net/jjcwqjLw/

All current browsers support the :not CSS feature: support is the same as for the :after pseudoelement.

Lucas Trzesniewski
  • 50,214
  • 11
  • 107
  • 158
  • Many thanks for your help. This worked and just added a display none and display block to reverse when the arrow showed. Thanks also to @Salman-A for your equally valid answer! – BEECHBOY707 Aug 24 '14 at 13:37