In this article, I am trying to write some code hide and show divs or spans you can use this code anywhere in your HTML page as well as your blogger page.
You can use this code as aptitude questions or anywhere you want to perform hide and show divs or spans.

JavaScript Dynamic Hide and Show or hide/show multiple divs or spans with a button click here I am using it in blogger.
JavaScript Dynamic function toggles show and hide div content on an HTML page.

Show and hide code below, for referring you can see this example Click Here:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 

<button onclick="outputhide(0)" style="background-color: #f17269; border-bottom: 0.15em solid black; border-radius: 3px; border: none; color: white; font-weight: 700; padding: 0.5em 1em; padding: 0.65em 1.3em;" title="Click to Show/Hide Content" type="button">Show/Hide</button>


<button onclick="outputhide(1)" style="background-color: #f17269; border-bottom: 0.15em solid black; border-radius: 3px; border: none; color: white; font-weight: 700; padding: 0.5em 1em; padding: 0.65em 1.3em;" title="Click to Show/Hide Content" type="button">Show/Hide</button>


<button onclick="outputhide(2)" style="background-color: #f17269; border-bottom: 0.15em solid black; border-radius: 3px; border: none; color: white; font-weight: 700; padding: 0.5em 1em; padding: 0.65em 1.3em;" title="Click to Show/Hide Content" type="button">Show/Hide</button>

<script type="text/javascript">
        function outputhide(val){
 //if you want to hide all answer then comment this 
// hideNonVisibleDivs(); 
  if(document.getElementById('q'+val).style.display=='none')
{
document.getElementById('q'+val).
style.display=''
}
else{
document.getElementById('q'+val).style.display='none'
}
  
}

function hideNonVisibleDivs() {
 var divsToHide = document.getElementsByClassName("q"); 
   for(var i = 0; i < divsToHide.length; i++){
       if(document.getElementById('q'+i).style.display!='none')
         {
document.getElementById('q'+i).style.display='none'
}
   }
}
        </script>
</body>

</html>
Below you can see the image hide and show button when you click.
multiple show hide div in blogger
show and hide div
When you click on the show/hide button you will get to see the Answer or div in your HTML page.
hide and show multiple div
hide and  show multiple div

ADDING SHOW AND HIDE IN BLOGGER

You can also use this show and hide to your blogger the below image for your referring.
If you wanted to see an example of show and hide you can refer to this PAGE. 

 Step 1:  Add span tag or div in that write you text or anything that you want to hide then add button(you can change span to div as you need in your blogger ) image below.



Step 2:  Add the end of your post writes this script.
show and hide in blogger
Multiple Span and Div JavaScript

Step 3: You can see this post I have added this code in my post, as you can see I have to remove <HTML><body> and etc tag to refer see this PAGE don't forget to add Script code at the end of your blogger post above div as you can see in 2nd Step.

Blogger hide and show

Step 4: See your blog post I will work as you see my below.
Blogger hide and show
If you found any difficulties do comment I try to solve.

Tags

Post a Comment

Post a Comment

Previous Post Next Post