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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Location
    NC, USA
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question hide show script

    I have been searching on this forum and others for a hide/show script that will behave like the one on this page.

    http://www.gty.org/Resources/Articles/4833

    I'm new to javascript so I'm really not sure what I'm looking for. Any help would be greatly appreciated.

    Thanks
    Last edited by taas; 09-05-2008 at 07:08 PM.

  • #2
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    here is a simple example.

    not perfect, but will help you in your quest

    PHP Code:
    <html>
        <
    head>
            <
    title>Hide and show script</title>
            <
    style type="text/css">
                
    htmlbody{
                    
    background-color#ccc;
                    
    border:0
                    
    margin:0;
                    
    padding:0;
                }
                
                
    table {
                    
    border0;
                    
                    
    border-spacing0;
                    
    text-align:left;
                    
    background-color#fff;
                
    }
                
    table td {
                    
                }
                
    table td#left {
                    
    width150px;
                    
    vertical-align:top;
                    
    padding10px;
                    
    background-colorlightyellow;
                    
                }
                
    table td#left ul {
                    
    list-stylenone;
                    
    margin0;
                    
    padding0;
                }
                
    table td#pane {
                    
    width20px;
                    
    text-align:center;
                    
    vertical-align:top;
                    
    background-colorlightblue;
                }
                
    table td#right {
                    
    width600px;
                    
    vertical-align:top;
                    
    padding10px;
                }
                
    table td#right p {
                    
    text-align:justify;
                }
            </
    style>
            <
    script type="text/javascript">
                function 
    hide_show() {
                    var 
    left window.document.getElementById("left");
                    var 
    right window.document.getElementById("right");
                    var 
    pane window.document.getElementById("pane");
                    if (
    left.style.display != 'none') {
                        
    left.style.display 'none';
                        
    pane.innerHTML "S<br />H<br />O<br />W";                    
                    } else {
                        
    left.style.display 'block';
                        
    pane.innerHTML "H<br />I<br />D<br />E";
                    }                
                } 
    //-- ends hide_show
            
    </script>
        </head>
        <body>
        <div style="width: 900px;">
            <table>
                <tr>
                    <td id="left">
                        <ul>
                            <li>Hide and show</li>
                            <li>Hide and show</li>
                            <li>Hide and show</li>
                            <li>Hide and show</li>
                        </ul>
                    </td>
                    <td id="pane" onclick="javascript: hide_show();">
                        H<br />I<br />D<br />E
                    </td>
                    <td id="right">
                        <h1>Lorem Ipsum</h1>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type 
                            specimen book. It has survived not only five centuries, but also the leap into 
                            electronic typesetting, remaining essentially unchanged. It was popularised in 
                            the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                            and more recently with desktop publishing software like Aldus PageMaker including
                            versions of Lorem Ipsum.
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        </body>
    </html> 
    cheers

    ~E

  • Users who have thanked ess for this post:

    taas (09-06-2008)

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Location
    NC, USA
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks, I will give it a try and let you know how it works out.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You might also want to make a slight movement on it:
    Code:
    <style type="text/css">
    #container{padding:10px;border:3px double #999;width:800px;height:110px;}
    #left{width:150px;float:left;}
    #right{float:right;width:555px;}
    #trig{float:left;height:100px;border:1px solid #222;margin:0px;
    text-align:center;cursor:pointer;padding:0px 5px;
    border-right:2px solid #999;
    }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#trig').click(function(){
    	if(this.firstChild.nodeValue!='Show'){
    	this.firstChild.nodeValue='Show';
    	$('#right').animate({width:'705px'},1000);}
    	else{
    	this.firstChild.nodeValue='Hide';
    	$('#right').animate({width:'555px'},1000);}
    	
    	$('#left').animate({width:'toggle',opacity:'toggle'},1000);
    	});});
    </script>
    <div id="container">
    	<div id="left">
    This is the left content
    	</div>
    	<p id="trig">Hide</p>
    	<div id="right">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim.
    	</div>
    </div>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    taas (09-06-2008)


  •  

    Posting Permissions

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