Add text to a pseudo element on the second click of the same div

Question

I have a very basic function that shows the :after of a div onclick by adding a class to it.

All I want to achieve is that, from the second click on, the :after would change from "THIS" to "AND THIS"

Any hint?
Thanks!

 $(document).on("click","#click",function(){$("#logo").addClass("open")}); 

 #click{cursor:pointer} #logo.open:after{content:" THIS"} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="click">CLICK HERE</div><br> <div id="logo">SHOT</div> 

Answer 1

You can check to see if the element has .open , and if so, add a new class that overwrites the ::after content

 var $logo = $('#logo'); $(document).on("click","#click",function(){ if ($logo.hasClass('open')) { $logo.addClass('and'); } else { $logo.addClass('open'); } }); 

 #click{cursor:pointer} #logo.open::after{content:" THIS"} #logo.and::after{content:" AND THIS"} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="click">CLICK HERE</div><br> <div id="logo">SHOT</div>