スタック オーバーフローの貢献者の皆様、こんにちは。
アコーディオンに jQuery UI プラグインを使用しています。表示非表示機能もあります。ユーザーがアコーディオン ヘッダー アイテムを選択すると、div はコンテンツを正しくスライドさせます。コンテンツの段落があり、次に「もっと読む」と「非表示」の表示非表示トグルがあります。
私の問題は、誰かが利用可能なコンテンツを表示するためにアコーディオンを選択し、[続きを読む] をクリックしてから、[非表示] をクリックせずに別のアコーディオン選択をクリックすることにした場合、次のスライドには [続きを読む] コンテンツが表示されますが、「続きを読む」と表示されます。 「隠す」ではなく「」。
私が達成したいのは、複数のアコーディオン選択に影響を与えることなく、各アコーディオン選択が意図したとおりに機能するように「続きを読む」にすることです。表示非表示トグルを最小化する提案があれば、それも素晴らしいでしょう。前もって感謝します！
コードは次のとおりです。
<link rel="stylesheet" href="../css/style.css">
<div id="accordion2">
<h4>Accordion selection 1</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="slidingDiv">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p><a href="#" class="show_hide" >Read more</a></p>
</div>
<h4>Accordion selection 2</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="slidingDiv">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p><a href="#" class="show_hide" >Read more</a></p>
</div>
<h4>Accordion selection 3</h4>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="slidingDiv">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p><a href="#" class="show_hide" >Read more</a></p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
<!-- SHOW HIDE MORE -->
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(this).text('Read more');
$(".slidingDiv").slideToggle();
$(this).text('Hide');
$(this).text('Hide');
}, function() {
$(".slidingDiv").slideToggle();
$(this).text('Read more');
});
</script>
<script>
$(function() {
$( "#accordion2" ).accordion({
heightStyle: "content",
});
});
</script>
Leeish に感謝します。以下を追加しました。
activate: function( event, ui ) {
$(".slidingDiv").slideToggle();
$('.show_hide').text('Read more');
}