Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Show Hide Div

  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post

    Show Hide Div

    Dear Experts

    I have following codes

    Code:
    <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

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    850
    Thanks
    11
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    England
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I recommend jQuery for something like this, the slideToggle function to be specific.

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

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,924
    Thanks
    46
    Thanked 203 Times in 202 Posts
    i think OP wants hovering over link 1 to hide div1 and hovering over link two hides div2
    something like
    Code:
    <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>
    Code:
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by tqmd1 View Post
    Dear Experts

    I have following codes

    Code:
    <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:

    Code:
    <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>
    Last edited by mvmacd; 11-18-2011 at 04:00 PM. Reason: additional info


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •