表示/非表示のコンテンツ

Question

私はこのGoogle機能に関するヘルプが必要です。どのように名前を変更するか：例えば、 "ボックス"がSHOWを表示するだけで、 "ボックス"が隠れている場合は、HIDEだけが表示されます。

表示/非表示は、表示と非表示の両方に表示されます。あなたは、単にそのためにカウンタを使用することができます

 
$(document).ready(function(){ 
 
    $(".show").click(function(){ 
 
     $(".apaansi").toggle(); 
 
    }); 
 
});

.box { 
 
    border:1px solid #dedede; 
 
    padding:1%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="uniquename"> 
 
    
 
    <div class="apaansi"> 
 
    
 
    <div class="box col-lg-12 col-md-12 col-sm-12 col-xs-12"> Search </div> 
 
    
 
    </div> 
 
    
 
    
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
<a href="#" class="show show-car"> Show/Hide <i class="fa fa-chevron-down"></i> </a> 
 
</div> 
 
    
 
</div>

Answer 1

..

ここフィドルです：https://jsfiddle.net/LL5xhapL/

$counter = 0; 
    $(".show").click(function(){ 
     if($counter % 2) 
     { 
      $(this).html('Hide <i class="fa fa-chevron-down"></i>'); 
     }else{ 
      $(this).html('Show <i class="fa fa-chevron-right"></i>'); 
      $counter = 0; 
     } 
     $counter++; 
     $(".apaansi").toggle(); 
    }); 

Answer 2

$(document).ready(function() { 
 
    $(".show").click(function() { 
 
    $(".apaansi").toggle(); 
 
    $('.apaansi').css('display') == 'none' ? $(this).text('Show') : $(this).text('Hide'); //show hide base on css 
 
    }); 
 
});

.box { 
 
    border: 1px solid #dedede; 
 
    padding: 1%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="uniquename"> 
 

 
    <div class="apaansi"> 
 

 
    <div class="box col-lg-12 col-md-12 col-sm-12 col-xs-12">Search</div> 
 

 
    </div> 
 

 

 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <a href="#" class="show show-car"> Hide <i class="fa fa-chevron-down"></i> </a> 
 
    </div> 
 

 
</div>

divの表示時に表示されるデフォルトのテキストを非表示にする