ユーザーがリンクをクリックしたときにテキストを含むdivを表示する機能に取り組んでいます。
リンクは最初にテキスト「show+」を表示し、次にdivが表示されると、このテキストは「hide-」に変わります。コードは以下のとおりです。
JQUERY
<script>
$(document).ready(function() {
$('p.link + div').hide();
$('p.link a').prepend('<span>info +</span> ');
$('p.link a').click(function(e) {
var vis = $(this).parent().next().toggle().is(':visible');
$(this).find('span').text(vis ? 'hide -' : 'info +');
e.preventDefault();
});
});
</script>
HTML
<p class="link"><a href="#" class="show-hide"> </a></p>
<div class="info">
<p>Some sample text to show and hide</p>
</div> <!-- info -->
これはすべて正常に機能していますが、すぐに表示/非表示にするのではなく、トグルに速度を追加してテキストを徐々に表示することを決定しました。したがって、次の行を修正しました。
JQUERY
var vis = $(this).parent().next().toggle("slow").is(':visible');
これにより、必要なトランジション効果が得られますが、リンクテキストは変更されていません。最初は「info+」と表示されますが、その後、divが表示されているかどうかに関係なく、リンクテキストは「hide-」と表示されます。
これは、コードがdivを表示していない場合でも常に表示しているためだと思いますが、これを修正する方法がわかりません。
どんな助けでもいただければ幸いです。
ありがとう