单击按钮时,我希望文本切换并说“阅读更多”或“阅读更少”。如果我单击另一个按钮,我希望上一个按钮返回其原始文本“阅读更多”
HTML:
<div class="accordion">
<div class="abtn">
<input id="A-1" type="radio" value="A">
<label class="chars" for="A-1">A</label>
<div class="char-more">Learn More</div>
</div>
<div class="acontent">Hello I am content A</div>
<div class="abtn">
<input id="B-1" type="radio" value="B">
<label class="chars" for="B-1">B</label>
<div class="char-more">Learn More</div>
</div>
<div class="acontent">Hello I am content B</div>
<div class="abtn">
<input id="C-1" type="radio" value="C">
<label class="chars" for="C-1">C</label>
<div class="char-more">Learn More</div>
</div>
<div class="acontent">Hello I am content B</div>
</div>
jQuery:
$(".abtn .char-more").click(function(){
$(this).closest('.abtn').nextAll(".acontent").first().slideToggle("fast")
.siblings(".acontent:visible").slideUp('fast');
$(this).html("Read Less");
$(this).siblings(".char-more").html("Read More");
});
提琴手。