We are going to see how to
hide the text on the click of button and
show again on another click.
First take a
example of the MCQ question shown below in image. This question at end has the button which show/hide the answer based on the current visibility of answer text:
Steps to use the demo for the hide/show text::1) create new post
2) select HTML from the Compose/HTML button on top left of the toolbar of the blog
and delete default text on that page.
3) copy code given below
4) Test the hide/show text after publishing /updating the page to blogger.
5) View updated page in browser and you can see the working demo.
Below is the code you need to copy paste to new blogger post:
code starts after this line<div dir="ltr" style="text-align: left;" trbidi="on">
<b>here we have an exampe to hide and show the answer of the below question:</b><br />
<b><br /></b>
<b>Question: What is the color of sky:</b><br />
<div>
<b>(1) Purple</b></div>
<div>
<b>(2) Orange</b></div>
<div>
<b>(3) Green</b></div>
<div>
<b>(4) Blue </b></div>
<b><br /></b>
<!--(this is comment) here, this button below hide/show text on click, we are passing id of the division ("hideshow") to hide/show the content of division -->
<button onclick="if(document.getElementById('hideshow').style.display=='none') {
document.getElementById('hideshow').style.display=''
}else{
document.getElementById('hideshow').style.display='none'}" title="Show/hide content" type="button"><b>Show/hide Answer</b></button>
<br />
<!--(this is comment) here, on button click event, the state of the text will change as we are passing the id of the division we want to hide or show -->
<br />
<div id="hideshow" style="display: none;">
Correct answer is option - (4) Blue </div>
</div>
code ends before this line
