[英]Show/Hide Div - and make the “Read More” button hide on click
I'm working on some Javascript to make "Read More" and "Read Less" buttons to expand and collapse text. 我正在使用一些Javascript制作“阅读更多”和“阅读更少”按钮来展开和折叠文本。 I have this almost perfectly working like I hoped for, but I can't figure out the final syntax.
我的工作几乎达到了我希望的那样,但是我无法弄清楚最终的语法。
I have my progress marked up here: 我在这里标记了我的进度:
https://jsfiddle.net/bmorrical/j17zfy7e/ https://jsfiddle.net/bmorrical/j17zfy7e/
Can someone point me in the right direction on how to: 有人可以为我指出正确的方向:
I'm just trying to toggle the "Read More" on click, thank you. 我只是想在点击时切换“阅读更多”,谢谢。
JS JS
function show() {
document.getElementById('scritta').className='visiblediv';
}
function hide() {
document.getElementById('scritta').className='hiddendiv';
}
var p1 = document.getElementById("p1");
p1.onclick = show;
var p2 = document.getElementById("p2");
p2.onclick = hide;
CSS CSS
.visiblediv {
display: block;
}
.hiddendiv {
display: none;
}
HTML 的HTML
<p>This is sample text to represent a paragraph.</p>
<button id="p1">Read More</button>
<div id="scritta" class="hiddendiv">This is more sample text to represent additional text after the button has expanded the text.<button id="p2">Read Less</button></div>
You can apply the same hiddendiv
and visiblediv
classes to the button ID: 您可以将相同的
hiddendiv
和visiblediv
类应用于按钮ID:
function show() {
document.getElementById('scritta').className = 'visiblediv';
document.getElementById('p1').className = 'hiddendiv';
}
function hide() {
document.getElementById('scritta').className = 'hiddendiv';
document.getElementById('p1').className = 'visiblediv';
}
if you are using jquery you could do something with toggle()
and hide()
如果您使用的是jquery,则可以使用
toggle()
和hide()
做一些事情
$('#p2').hide();
$('#p1').click(function(){
$('#p1').toggle();
$('#p2').toggle();
});
$('#p2').click(function(){
$('#p1').toggle();
$('#p2').toggle();
});
fiddle: https://jsfiddle.net/j17zfy7e/6/ 小提琴: https : //jsfiddle.net/j17zfy7e/6/
Something like that ? 这样的事?
$('#p1').on('click', function(){
$(this).css('visibility', 'none');
$('#p2').css('visibility', 'visible');
});
$('#p2').on('click', function(){
$(this).css('visibility', 'none');
$('#p1').css('visibility', 'visible');
});
Simply add visibility:hidden to #p2 in your css or work with classes 只需添加可见性:隐藏在CSS中的#p2或使用类
$('#p1').on('click', function(){
$(this).addClass('hidden');
$('#p2').addClass('visible');
});
etc. 等等
You can apply the p1 your hidden/visible classes like this, when you call your show,hide functions. 当调用show,hide函数时,您可以像这样将p1应用于隐藏/可见类。
function show() {
document.getElementById('scritta').className='visiblediv';
document.getElementById('p1').className='hiddendiv';
}
function hide() {
document.getElementById('scritta').className='hiddendiv';
document.getElementById('p1').className='visiblediv';
}
var p1 = document.getElementById("p1");
p1.onclick = show;
var p2 = document.getElementById("p2");
p2.onclick = hide;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.