View Details On Mouse Click Using Java-Script and HTML
If You Click on the element then it will show its description.
This is First Option
here is some description
This is Second Option
here is some description
This is Third Option
here is some description
This is Fourth Option
here is some description
This is Fifth Option
here is some description
Download Complete Code From Here
HTML Code:
<body>
<div class="main">
<p class="option" onclick="foo(this)" id="1">This is First Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a1"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo(this)" id="2">This is Second Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a2"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo(this)" id="3">This is Third Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a3"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo(this)" id="4">This is Fourth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a4"><pre>here
is some
description</pre></div>
</div>
<div class="main">
<p class="option" onclick="foo(this)" id="5">This is Fifth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a5"><pre>here
is some
description</pre></div>
</div>
<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Click on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>
</body>
Java-Script Code:
<script>
function foo(getid){
var x = document.getElementById('a'+(getid.id));
if(x.style.display=="block")
{
x.style.display="none";}
else{x.style.display="block";}
}
</script>
CSS Code:
<style>
.main p img{height: 3%;float: left;width: 10%;}
body{background-color:wheat;}
.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}
.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}
.dec{background-color: whitesmoke;padding: 5px;display: none; }
</style>
Post a Comment