Toggle text when link is clicked

jquery onclick toggle slidetoggle
egr103 picture egr103 · Jul 18, 2013 · Viewed 28.2k times · Source

I have the below code that toggles a div (called #extra) into view:

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    return false;
});

My click function is this link:

<a href="#" id="more">More about us</a>

How do I get that 'More about us' text to change to read 'Less about us' when the #extra div is visible? When the same link is clicked to hide the div, I'd like the text of the link to change back to read 'More about us'.

Answer

Nishu Tayal picture Nishu Tayal · Jul 18, 2013

Use this code :

$('#more').click(function() {
    jQuery(this).text('less about us');
    if($('#extra').is(':visible')){
          jQuery(this).text('Less about us');
    }else{
          jQuery(this).text('More about us');
    }
    $('#extra').slideToggle('fast');
    return false;
});

Here is the demo : http://jsfiddle.net/AAFaY/

Related questions

Click toggle with jQuery

I've used a hover function where you do x on mouseover and y and mouseout. I'm trying the same for click but it doesn't seem to work: $('.offer').click(function(){ $(this).find(':checkbox').attr('checked', true ); },function(){ $(this).…

Read More
Get the contents of a table row with a button click

I need to extract the details of each column in my table. For example, column "Name/Nr.". The table contains a number of addresses The very last column of each row has a button that lets a user choose a …

Read More
Add disabled attribute to input element using Javascript

I have an input box and I want it to be disabled and at the same time hide it to avoid problems when porting my form. So far I have the following code to hide my input: $(".shownextrow").click(function() { $(…

Read More