|
HTML - Expand/collapseall
Hi all,
I have a requirement to implement expand/collapseALL......... To tell in Detail....... i have 3 sections with expand/collapse in each section...... which expands their own sections......which is working perfectly for me . Then I have one more expandAll/CollapseAll at the top which is suppose to expands or collapse all the 3 sections child elements... Here is the requirement: Home ExpandAll | Collapse All [this is the one which is not working ] -------------------------------------------------------------------------------- Expand | Collapse Block 1 subBlock1.1 subBlock1 Block1.2 subBlock2 subBlock2 subBlock2 Block1.3 subBlock3 subBlock3 -------------------------------------------------------------------------------- Expand | Collapse Block2.1 subBlock1 subBlock1 subBlock1 Block2.2 subBlock2 Block3.1 subBlock3 subBlock3 -------------------------------------------------------------------------------- Expand | Collapse Block3.1 Any ideas please let me know............. Thankyou. regards, radhika. Similar TutorialsI want to know how do we expand a row when mouse moves over that particular row?and moves back when moves out of it Is this possible with event handlers ???? Can someone help me ? I have a table on a site and I want, by clicking a button, to expand the table down then, by pushing the button again, or other button, to return to its initial size. Thanx. What is the HTML code for expanding and collapsing the contents, when clicking on a text, on a page? Just a plain and quick code for this option. Thank you very much. This is frustrating, I'm looking for that code, working in IE and Firefox. Please help! This isn't really a problem but just wanted to learn how to make an image expand or get bigger onmouseover. You can see what i mean by going to these website's. one is for a video and one is for a image. http://www.appstorehq.com/htmleditor...hone-63962/app Put your mouse over the screenshots. http://videocopilot.net/tutorials/ Put your mouse over the screenshots. Hi I am creating a website template for a content management system, so i need to ensure that the content area can vertically stretch to any height, But i am currently having some trouble with the tables. I was wondering if anyone has a solution that would allow the content area to stretch without showing the grey background behind the surrounding images, as shown in the screenshot. The bottom row can be extended without issue, but by default when content is added to the content area its the middle row that is extending. How can i stop this? Also i need to centre both the tables, but one is an absolute div. Is there someway i can centre these but ensure that both tables are always aligned on top of each other? Thanks in advance for your help. HTML Code: <html> <head> <meta http-equiv="Content-Language" content="en-au"> <title>NewcastleRoofingWebsite1024x768</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body bgcolor="#C0C0C0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (NewcastleRoofingWebsite1024x768.psd) --> <div > <table id="Table_01" width="1015" height="761" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="12"> <img src="images/index_01.jpg" width="1015" height="229" alt=""></td> </tr> <tr> <td colspan="2" rowspan="2"> <img src="images/index_02.jpg" width="282" height="47" alt=""></td> <td> <img src="images/index_03.jpg" width="116" height="36" alt=""></td> <td rowspan="2"> <img src="images/index_04.jpg" width="2" height="47" alt=""></td> <td> <img src="images/index_05.jpg" width="117" height="36" alt=""></td> <td rowspan="2"> <img src="images/index_06.jpg" width="2" height="47" alt=""></td> <td> <img src="images/index_07.jpg" width="117" height="36" alt=""></td> <td rowspan="2"> <img src="images/index_08.jpg" width="2" height="47" alt=""></td> <td> <img src="images/index_09.jpg" width="117" height="36" alt=""></td> <td rowspan="2"> <img src="images/index_10.jpg" width="2" height="47" alt=""></td> <td> <img src="images/index_11.jpg" width="119" height="36" alt=""></td> <td rowspan="2"> <img src="images/index_12.jpg" width="139" height="47" alt=""></td> </tr> <tr> <td> <img src="images/index_13.jpg" width="116" height="11" alt=""></td> <td> <img src="images/index_14.jpg" width="117" height="11" alt=""></td> <td> <img src="images/index_15.jpg" width="117" height="11" alt=""></td> <td> <img src="images/index_16.jpg" width="117" height="11" alt=""></td> <td> <img src="images/index_17.jpg" width="119" height="11" alt=""></td> </tr> <tr> <td> <img src="images/index_18.jpg" width="10" height="9" alt=""></td> <td colspan="11" rowspan="2"> <img src="images/index_19.jpg" width="1005" height="484" alt=""></td> </tr> <tr> <td> <img src="images/index_20.jpg" width="10" height="475" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="272" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="116" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="117" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="117" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="117" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="119" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="139" height="1" alt=""></td> </tr> </table> <p> </p> <div style="position: absolute; width: 1020px; height: 100%; z-index: 1; top: 288px; left:0" id="layer2"> <table id="Table_01" width="1015" height="477" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="50" colspan="2"> </td> <td colspan="5"> <img src="images/index_05.png" width="806" height="50" alt=""></td> <td> </td> </tr> <tr> <td height="257" colspan="2"> </td> <td colspan="2" background="images/index_08.png" height="257"> </td> <td rowspan="2" bgcolor="#FFFFFF"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> <p> <p> </td> <td colspan="2" background="index_10.png" height="257"> </td> <td height="257"> </td> </tr> <tr> <td colspan="3" background="index_12.png"> <p>h</td> <td background="images/index_13.png"> </td> <td background="images/index_14.png"> </td> <td colspan="2" background="index_15.png"> </td> </tr> <tr> <td height="41" colspan="2"> <img src="images/index_16.png" width="96" height="41" alt=""></td> <td colspan="5"> <img src="images/index_17.png" width="806" height="41" alt=""></td> <td> <img src="images/index_18.png" width="113" height="41" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="86" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="33" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="9" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="716" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="9" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="39" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="113" height="1" alt=""></td> </tr> </table></div></div> <!-- End ImageReady Slices --> </body> </html> Hello I'm new to HTML Now straight to the point : I have a web page that looks too big when screen resolution is 1024x786 , but on the other pc (screen resolution 1280x1024 ) the same page looks too small and I have white spaces around it. I want my whole page with it's elements adapt to the browser window size and fit exactly to it ( I don't want to see that scrolling thing on the right or bottom ). You could just give me the link of the function/code I have to use. Here is my code if that helps. Code: <html>
<title>AiiT</title>
<body background="b.png" style="background-repeat:no-repeat; background-position:center center; width: 1024px;height:768px;">
<div style="background-image: url('1.png'); width:764px; height:557px; position: absolute;
top: 12%;
left: 50%;
margin-left: -382px; text-align:center;
"><div style="background-image: url('Tr.png'); background-repeat:no-repeat; position: relative; left:30px; top:30px;"><img src="Her.png" border="0" style="margin-top:10px;"><br><br>
<a href="en/"><img src="an.png" border="0"></a> <a href="lt/"><img src="li.png" border="0"></a><br><br><img src="Logo.png" border=0"></div></div>
</body>
</html>
Help appreciated. Hi, i enclose the zip file, where are some files. If you click on 1start.html (best viewed in IE) and than click on "group1" and on "1.general1" it right frame should appear the content. So far so good. Later when I want to show/hide or collapse/expand the content and I click on the icon, something doesn't work. Can anyone pleease look in this code and tell me what's wrong. I seem not to know what i'm doing wrong. thank you all why the table i have dont expand over browser borders when sum of td widths is bigger than screen width? How can i overcome this problem? Hey, I'm trying to write some code for expanding and concealing text You can see this in action at youtube when you click the (more) button to expand text. Suppose I had a heading: MyHeading and a body of text: MyTextHere How do I make it so that when you click MyHeading it makes MyTextHere (initially not visible) appear, and when you click MyHeading again, it makes MyTextHere disappear? Thanks Alot. |
|||||||