显示/隐藏Div-并在单击时隐藏“ Read More”按钮

Question

我正在使用一些Javascript制作“阅读更多”和“阅读更少”按钮来展开和折叠文本。 我的工作几乎达到了我希望的那样，但是我无法弄清楚最终的语法。

我在这里标记了我的进度：

https://jsfiddle.net/bmorrical/j17zfy7e/

有人可以为我指出正确的方向：

1. 单击时删除“阅读更多”
2. 单击“阅读较少”时显示“阅读更多”

我只是想在点击时切换“阅读更多”，谢谢。

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

.visiblediv {
    display: block;
}

.hiddendiv {
    display: none;
}

的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>

Answer 1

您可以将相同的hiddendiv和visiblediv类应用于按钮ID：

JS小提琴

function show() {
    document.getElementById('scritta').className = 'visiblediv';
    document.getElementById('p1').className = 'hiddendiv';
}

function hide() {
    document.getElementById('scritta').className = 'hiddendiv';
    document.getElementById('p1').className = 'visiblediv';
}

Answer 2

如果您使用的是jquery，则可以使用toggle()和hide()做一些事情

$('#p2').hide();

$('#p1').click(function(){
    $('#p1').toggle();
    $('#p2').toggle();
});

$('#p2').click(function(){
    $('#p1').toggle();
    $('#p2').toggle();
});

小提琴： https : //jsfiddle.net/j17zfy7e/6/

Answer 3

这样的事？

$('#p1').on('click', function(){
    $(this).css('visibility', 'none');
    $('#p2').css('visibility', 'visible');
});

$('#p2').on('click', function(){
    $(this).css('visibility', 'none');
    $('#p1').css('visibility', 'visible');
});

只需添加可见性：隐藏在CSS中的＃p2或使用类

$('#p1').on('click', function(){
        $(this).addClass('hidden');
        $('#p2').addClass('visible');
    });

等等

Answer 4

当调用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;

工作的小提琴