Change text from a span, if a div is visible and change it back if the div gets hidden (.text() and .slideToggle)

Change text from a span, if a div is visible and change it back if the div gets hidden (.text() and .slideToggle)

Hi,

I have a span. If the span gets clicked, a text toggles. If the span gets clicked again, the text disappears.
I want to change the text of the span, each time it is clicked.
An Example: the span says: Show text - when I click it, the text appears, now the span shall "say" hide text. this is my actual code:

  1. jQuery(document).ready(function($) {
       
        $('.single_content').hide();
        $('.css_hide').show();
        $('.show_content').click(function(){
            var $this = $(this);
            var $single_content = $('.single_content');

            $single_content.slideToggle();
           

            if ( $single_content.is(':visible') ) {
                $this.val('abc');  
            }
           
            if ( $single_content.is(':hidden') ) {
                $this.val('ttt');  
            }
           
        });



















  2. });