Using JavaScript to change the display property

      No Comments on Using JavaScript to change the display property

Using JavaScript to change the display property:

See the Pen Using JavaScript to change the display property by scanfcode (@scanfcode) on CodePen.

Using JavaScript to change the display property-Try it yourself

<style>
.flip
{
 background-color:#333399;
 padding:10px;
 color:#fff;
 margin:5px;
 font-size:18px;
 text-align:center;
}
#flipped
{
 background-color:#333399;
 padding:10px;
 color:#fff;
 margin:5px;
 font-size:18px;
 text-align:center;
 display:none;
 line-height:170%;
}
</style>
<p class="flip" onclick="myflip();">Click to show hidden part</p>
<div class="content_flip" id="flipped">
This is the hidden part.
<br> <p>A JavaScript function myflip() is called when the "Click to show hidden part" is clicked. The value for display property for id flipped is set to none.</p><p>
The JavaScript function changes the display property value for the of id flipped to block. This function thus makes the hidden part visible on click.  </p>
<br>
</div>
<script>
function myflip()
{
    document.getElementById("flipped").style.display = "block";
}
</script>

Using JavaScript to change the display property

Leave a Reply

Your email address will not be published. Required fields are marked *