单击时更改按钮文本（更多/更少）

Question

Using bootstrap 3 CSS, font awesome CSS, and the latest jQuery JS files.

I am using javascript to hide/show a div of content on top of another div of content when a button is clicked.

HTML

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

</div></div></div>

CSS

.HScontainer {
  overflow:hidden;
}

.HSouter {
  position:relative;

  width: 300px;
  height: 200px;
  background: #FBCF3C;
  border: 1px solid black;
  overflow:hidden;
}
.HSbox {
  position:absolute;
  bottom:0;
  left:0;
  width: 300px;
  height: 200px;
  margin-bottom: -200px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all: 0.8s ease;
  transitions: all 0.8s ease;
  background: #19A4DA;
}

.HSbox p {
  margin: 0;
  padding: 5px 0 5px 0;
}

.HSshow {
    margin: 0;
}

.HSshowit { width:300px; }

JS

$(function(){
$('.HSshowit').click(function(e) {
    $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');
});
});

I would like the text on the button to change from

Show More <i class="fa fa-caret-square-o-up"></i>

to

Show Less <i class="fa fa-caret-square-o-down"></i>

Here is the example...

http://codepen.io/john84/pen/fIupa

Answer 1

This is what i usually do, Give rev attribute in the button
HTML

<a href="#" rev="more" class="HSshowit btn btn-primary" role="button">
Show More <i class="fa fa-caret-square-o-up"></i>
</a>

JS

$(function(){
$('.HSshowit').click(function(e) {
    $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');

var condition = $(this).attr("rev");
  if(condition == "more"){
    $(this).html("Show Less <i class='fa fa-caret-square-o-down'>");
    $(this).attr("rev","less");
  }
  else{
    $(this).html("Show More <i class='fa fa-caret-square-o-up'>");
    $(this).attr("rev","more");
  }
e.preventDefault(); //prevent default click action from happening
});
});

Here is the result

Answer 2

Set the text based on the state of the HSbox element like

$(function () {
    $('.HSshowit').click(function (e) {
        var $box = $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');
        $(this).html($box.hasClass('HSshow') ? 'Show Less <i class="fa fa-caret-square-o-down"></i>' : 'Show More <i class="fa fa-caret-square-o-up"></i>')
    });
});

Demo: Fiddle