CODEWITHSUNDEEP
jquery
bobek
bobek

Reputation: 8022

jquery change text onclick problem

I have a number of brands that I display, but I want to display only first 5 and have see more brands text. I have everything set up correctly and functionality is fine, but after the click I would like to change the text from see more brands to see less brands. 

<li style="font-size:12px; margin-left:2px;" class="showmorebrands">
<a onclick="$('#morebrands').toggle('fast', function() {  });">Show More Brands</a></li>

I tried inner text, but that changes the text and the html, so my button doesn't work anymore.

I appreciate all help.

Thank you.

EDIT:

The morebrands has inline style display:none;

Upvotes: 0

Views: 1024

Answers (3)

FishBasketGordo
FishBasketGordo

Reputation: 23132

I would do something like this:

<li style="font-size:12px; margin-left:2px;" class="showmorebrands">
    <a>Show More Brands</a>
</li>
<script type="text/javascript">
  $(function() {
    var $moreBrands = $('#moreBrands'),
        $showHideBrands = $('.showmorebrands a');

    $showHideBrands.click(function(event) {
      $moreBrands.toggle(
        'fast', 
        function() {
          $showHideBrands.text(
            $moreBrands.is(':visible') ? 'Show Less Brands' : 'Show More Brands');
        }
      );
      event.preventDefault();
    });
  });
</script>

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

$(function(){
   $("li.showmorebrands a").click(function(){
      var $this = $(this);
      $('#morebrands').toggle('fast', function() { 
         if($('#morebrands').is(":visible")){
            $this.html("Show More Brands");
         }
         else{
            $this.html("Show Less Brands");
         }
      });
   });
});

Upvotes: 4

bfavaretto
bfavaretto

Reputation: 71908

Try:

$('#morebrands').toggle('fast', function() { $(this).text('Show less brands') });

Upvotes: 0

Related Questions