simple question

Discussion in 'PHP' started by bartolay13, Dec 31, 2007.

  1. #1
    hello there,

    just a question, how does the drop down thing work, example, below this page the "Posting Rules" tab and or the "Similar Threads" tab, when i click the arrow on the right it hides and unhides the content of the tab...

    will i do this in js? php? ajax? without reloading the whole page. hihihi, just cant get the logic. :D
     
    bartolay13, Dec 31, 2007 IP
  2. selling vcc

    selling vcc Peon

    Messages:
    361
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This can be done with javascript, by changing the css property visibility:visible to visibility:hidden and vice-versa

    Try this example

    <html>
    <head>
    <title>Javascript collapse</title>
    <style>
    <!--
    #title,#content
    {
    	border:solid 1px red;
    	width:300px;
    	margin:0px 5px;
    	padding:5px;
    }
    
    #content
    {
    	visibility:hidden;
    }
    -->
    </style>
    
    <script language="javascript" type="text/javascript">
    function changeVisibility()
    {
    	element = document.getElementById('content');
    	button = document.getElementById('button');
    	currentVisibility = element.style.visibility;
    	if(currentVisibility=='visible')
    	{
    		element.style.visibility='hidden';
    		button.innerHTML ='(expand)';
    	}
    	else
    	{
    		element.style.visibility='visible';
    		button.innerHTML ='(collapse)';
    	}
    }
    </script>
    </head>
    
    <body>
    
    <div id="title">Hot News <a href="#" onclick="changeVisibility();return false"><span id="button">(expand)</span></a></div>
    <div id="content">Will i do this in js? php? ajax? without reloading the whole page. hihihi, just cant get the logic.</div>
    
    </body>
    </html>
    
    HTML:
     
    selling vcc, Dec 31, 2007 IP