javascript - トグル/トグル解除時に、[その他のオプション]を[少ないオプション]に、またはその逆に変更します。

Question

[[その他のオプション]]を[[少ないオプション]]に変更する方法と、クリックした場合の方法を知りたいのですが。

<div class="toggle-this" style="display: none">
<h3 style="border:1px solid;">Job Search</h3></div>
<div class="toggle-this" style="display: none"><div class="form_input"></div></div>

<div class="toggle-trigger" style="text-align:center; cursor: pointer;">[[More options]]</div>

<script language="javascript">
$(".toggle-trigger").click(function() {
$('.toggle-this').toggle();
return false;
});  
</script>

Answer 1

$(document).ready(function(){
   $(".toggle-trigger").click(function(e) {
      var $elem = $('.toggle-this');
      $elem.toggle();
      $(this).text($elem.is(':hidden') ? '[[More options]]' : '[[Less options]]')
      e.preventDefault();
   });
})

http://jsfiddle.net/ffEMq/

Answer 2

よりエレガント：

$(".toggle-trigger").click(function()
{
    var map = {"none": "[[More options]]", "block": "[[Less options]]"};
    var element = $('.toggle-this').toggle();

    $(this).text(map[element.css("display")]);

    return false;
});​

このjsFiddleを見てください。