Search code examples
javascriptjquerytogglejsfiddlejquery-data

Data Toggle text in both direction

I am trying to toggle the text "Show more" and Show Less" with data, my script is almost working but i need it not stopping once it turns into the text "Show Less" and keep it continuing toggling "Show More" and "Show Less". What i am missing in my function ?

Here my jsfiddle: http://jsfiddle.net/Manna/3Ndcg/1/

<div class ="scorer_filter">
 <a href="#" class="hide_full_list" data-less="Show Less" data-more="Show More" data-table-id="32301" id="toggle">Show More</a>
</div>

  $(function() {
  $(".scorer_filter").on("click", ".hide_full_list", function(){
  var txt = "Show More" ? $('#toggle').data("less") : $('#toggle').data("more");
  $('#toggle').text(txt);
});

});

Solution

  • You are not testing the "txt" variable in your code. You should have done:

    var txt = $('#toggle').text();
txt = (txt == "Show More") ? $('#toggle').data("less") : $('#toggle').data("more");

    http://jsfiddle.net/3Ndcg/2/