I'm working on some Javascript to make "Read More" and "Read Less" buttons to expand and collapse text. 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:
/
Can someone point me in the right direction on how to:
- Remove "Read More" when it's clicked
- Show "Read More" when "Read Less" is clicked
I'm just trying to toggle the "Read More" on click, thank you.
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>
I'm working on some Javascript to make "Read More" and "Read Less" buttons to expand and collapse text. 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/bmorrical/j17zfy7e/
Can someone point me in the right direction on how to:
- Remove "Read More" when it's clicked
- Show "Read More" when "Read Less" is clicked
I'm just trying to toggle the "Read More" on click, thank you.
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>
- I'm not against it, I just haven't tried jQuery. Javascript/jQuery isn't my strongest skill. – BradM Commented Sep 15, 2015 at 14:33
4 Answers
Reset to default 2You can apply the same hiddendiv and visiblediv classes to the button ID:
JS Fiddle
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()
$('#p2').hide();
$('#p1').click(function(){
$('#p1').toggle();
$('#p2').toggle();
});
$('#p2').click(function(){
$('#p1').toggle();
$('#p2').toggle();
});
fiddle: https://jsfiddle/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
$('#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.
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;
A working fiddle