...

View Full Version : Show Hide Div



tqmd1
11-15-2011, 06:25 AM
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 following link
http://www.html.net/forums/download/file.php?id=97

Please help

Major Payne
11-16-2011, 01:26 PM
have you tried one of these show/hide div JavaScripts?

http://www.rgagnon.com/jsdetails/js-0086.html
http://www.dhtmlgoodies.com/scripts/show-hide-content-slide/show-hide-content-slide.html
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/
http://webdesign.about.com/od/dhtml/a/aa101507.htm

Dom Mv
11-18-2011, 12:42 AM
I recommend jQuery for something like this, the slideToggle function to be specific.

http://www.w3schools.com/jquery/eff_slidetoggle.asp

alykins
11-18-2011, 02:46 PM
i think OP wants hovering over link 1 to hide div1 and hovering over link two hides div2
something like


<a id="HDivOne"> hide div one </a>
<a id="HDivTwo"> hide div two </a>
<div id="DivOne">div one </div>
<div id="DivTwo"> div two </div>




HDivOne:hover DivOne {display:none;}
HDivTwo:hover DivTwo {display:none;}


should work or be enough to point in right direction... also is this still an issue? site doesn't work but no feedback on what you've been trying

mvmacd
11-18-2011, 02:57 PM
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 following link
http://www.html.net/forums/download/file.php?id=97

Please help

If I get you correctly, you want to click on the links "hide div 2" and "show div 2" and make div 2 appear or disappear depending on what was clicked. While you can do that with plain CSS, I recommend jQuery, you can get fancy with it too. Additionally, instead of having to click, you can set it so if you hover over the link, it will do the action. Let me know if you need help with this.

Test out this code and tell me if it works for you:




<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 id='hidediv2' href="">Hide Div 2</a></li>
<li><a id='showdiv2' href="">Show Div 2</a></li>
</ul>
</div>
<div id="div1">Div 1</div> <!--Added id=div1 -->
<div id="div2">Div 2</div> <!--Added id=div2 -->

<!--start code added for jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('#hidediv2').click(function() { $('#div2').fadeOut(500); return false; } );
$('#showdiv2').click(function() { $('#div2').fadeIn(500); return false;} );
<!--end code added for jQuery-->

});

</script>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum