Dear Experts

I have following codes

<html>
<style type="text/css">


#menu 	{
	position:absolute;
	height:300px;width:200px;
	margin-left:60px;margin-top:50px;
	background:rgb(0%,100%,80%);
	font-family:arial; font-size:30pt;font-weight:18px;
	text-align:center;padding:20px;padding:10px;
	}

#menu ul	{margin:1px;}
#menu ul li	{display:block;width:140px;background:orange;
	font-family:arial; font-size:18pt;text-align:center;padding:1px;margin:1px;height:20px;text-decoration:none}

#menu ul li a:link	{width:140px;background:rgb(0%,80%,40%);
	font-family:arial; font-size:18pt;text-align:center;padding:1px;margin:1px;height:20px;}

#menu ul li a:hover	{background:#e3eeff;text-decoration:underline;padding:1px;margin:1px;height:20px;}


#div1 	{
	position:absolute;
	height:300px;width:200px;
	margin-left:280px;margin-top:50px;
	background:rgb(0%,80%,40%);
	font-family:arial; font-size:30pt;font-weight:18px;
	text-align:center;padding:20px;
	}


#div2 	{
	position:absolute;
	height:300px;width:200px;
	margin-left:500px;margin-top:50px;
	background-color:pink;
	font-family:arial; font-size:30pt;font-weight:18px;text-align:center;padding:20px;
	}


</style>
<div id="menu">
<ul>
<li><a href="">Hide Div 2</a></li>
<li><a href="">Show Div 2</a></li>
</ul>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

</html>

My question is how to Show and Hide div with link as shown in attached file.


Please help

Recommended Answers

You have to have some sort of selector mechanism linked to an onclick event - javascript or jQuery

Jump to Post
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage1.jpg" alt=""></div>
</div>
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage2.jpg" alt=""></div>
</div>
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage3.jpg" alt=""></div>
</div>

web design chennai

Jump to Post

All 5 Replies

You have to have some sort of selector mechanism linked to an onclick event - javascript or jQuery

I can't understand exacly what you mean, but you can hide a div using the display: none; or visibility: hidden;
The difference between the two is that visibility occupy the same space as if it were visibile without being visible while display: none makes the div dissaper as it were never a code.

Hope this helps your quest.

My question is clear. how to display or hide div with hover?

<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage1.jpg" alt=""></div>
</div>
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage2.jpg" alt=""></div>
</div>
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage3.jpg" alt=""></div>
</div>

web design chennai

Sir,

If I am not wrong then where are following classes?

feature
show-feature

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.