change button text onclick

Question

We are using Quicksand ( the sortable filterbale quicksand plugin )

Anyhoo..

Apart from the normal filters, to initiate the quicksand animation. We also can display the individual < li > 's by using a sweet little Layout Switcher.

The code of which is:

<!-- layout switcher -->
    <div id="layoutSwitcher">
        <a id="buttonsend" class="notsosmall pink button">More Info</a>
    </div>
    <!-- /end layout switcher -->

But my issue is If active I want to display Less Info.

In normal state to show More Info.

I am positive we can do this using jQuery

The jQuery to control the switcher is:

jQuery('#layoutSwitcher a').myPortfolioLayoutSwitcher({
    show_switcher: true,
    full_width_layout: false 
});

So my question is simply.. can we change button text onclick to display less info or more info as necessary.

my

wesbos · Accepted Answer · 2011-06-25 04:25:30Z

5

Easy Peasy. You just need to toggle between two text spans.

 <a id="buttonsend" class="notsosmall pink button">
     <span>More Info</span>
     <span style="display:none">Less Info</span>
 </a>

and some JS

$('a#buttonsend').click(function() {
    $('span',this).toggle();
});

See it working here: http://jsfiddle.net/m9zxx/

answered Jun 25, 2011 at 4:25

wesbos

26.4k31 gold badges109 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

422 Over a year ago

Perfect thanks :) have changed first $ to jQuery , thats correct isnt it ?

wesbos Over a year ago

Yep, $ and jQuery are interchangeable. If you are using another library in addition to library its best to use jQuery rather than $

Marlin · Accepted Answer · 2011-06-25 04:26:29Z

2

Assuming that plugin works like jquery's inherent toggle method, toggle should work.

jQuery('#layoutSwitcher a').myPortfolioLayoutSwitcher({
    show_switcher: true,
    full_width_layout: false 
}).toggle(
    function(){jQuery(this).html('show less');},
    function(){jQuery(this).html('show more');});

answered Jun 25, 2011 at 4:26

Marlin

7494 silver badges8 bronze badges

Collectives™ on Stack Overflow

change button text onclick

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related