How to create a collapse button in HTML?

Ask a question+

I want to make a button in google blogger which will, when clicked collapse and show the hidden content and when again clicked it will contract and hide the content?

Please check the answer(s) posted and mark the one that best answers your question as the answer.

Community Cop
add comment

1 Answer


I just did some testing in Google Blogger for my blog… here is what I found

Good news, you can do it (I will show below). Bad news, it’s a bit nasty to code.

Here is the code I used in my blog to show and hide the text:

    This text is shown automatically.<br />
    <button id="click" onclick="javascript: var thisButton = document.getElementById('click'); var more = document.getElementById('showMore'); if (more.style.display == 'none') {more.style.display = 'inline'; thisButton.innerText = 'Show less';}else if (more.style.display == 'inline') {more.style.display = 'none'; thisButton.innerText = 'Show more';}" spellcheck="false">Show more</button><br />
    <div id="showMore" style="display: none;">
    This text is shown only when you click the button above.</div>

To view this in action click here

Hope this helps!

Batman 90
add comment

Your Answer