JavaScript Toggle Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events</title>
</head>
<style>
#btn{
background-color: red;
color: white;
border: solid 2px black;
cursor: pointer;
font-weight: 20;
}
</style>
<body>
<div class = "container">
<h1>This is a heading</h1>
<p id = "para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, earum ab amet nam ut odit molestiae soluta commodi iusto excepturi. Facere veritatis accusantium ex explicabo expedita, vitae accusamus id sapiente iure. Amet, modi! Non earum similique repellat officiis minus animi alias veniam porro libero, fugit sunt assumenda nostrum molestias laudantium pariatur quibusdam vel. Ut nam unde, minima amet quia porro nemo architecto, aliquam eveniet itaque repellat laudantium aliquid adipisci quas natus quam qui optio consectetur sint. Cum at architecto reprehenderit et odit adipisci, sed beatae, voluptas consectetur deserunt doloremque tenetur praesentium qui pariatur ab? In dolorum distinctio natus nobis perferendis. Suscipit nihil vitae repudiandae? Perferendis temporibus recusandae perspiciatis corporis vero! Architecto, rem. Repellendus consequuntur ex ut ea asperiores animi adipisci recusandae, velit optio consequatur! Labore illum iusto sed ipsa, cum quos quibusdam sequi at assumenda modi debitis tenetur, nesciunt quam, accusamus incidunt atque! Cupiditate aut esse nihil ipsa odio sint non quisquam laudantium nemo, ad distinctio odit ullam! Expedita voluptatem cum error, nesciunt dolore eveniet autem, iusto officia consectetur cumque itaque eius doloremque hic, vel architecto! Ea animi iure voluptate nihil, ad fugit odit aperiam est praesentium id delectus doloribus provident non itaque beatae? Amet fugiat esse repudiandae reprehenderit ipsam!</p>
</div>
<button id="btn" onclick= "toggleHide()" >Show/Hide</button>
<script>
function toggleHide(){
let btn = document.getElementById('btn');
let para = document.getElementById('para');
if(para.style.display != 'none'){
para.style.display = 'none';
}else{
para.style.display = 'block';
}
// using docgetBy is not neccessary because modern
// browser already supports a global var = id name.
}
</script>
</body>
</html>
Comments
Post a Comment