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:

1. Remove "Read More" when it's clicked
2. 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:

1. Remove "Read More" when it's clicked
2. 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>

• javascript
• html

• 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 4

You 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