Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide and Show content using <div> or <span> - Need help!!!

Status
Not open for further replies.
josel

josel

Programmer
Oct 16, 2001
716
US
I just completed writing a script to show a data grid of my customer list. I do not want to show too much information horizontally so, I figure I use hidden layers and show them upon request.

That said, I have a table with 9 columns and one row per record set. I want to set a hidden second row which will display ONLY if I click on an icon I am placing on the table.

I tried
Code: 
<div class="hidden">

  ... some html here ...

</div>

the style sheet for hidden looks like
Code: 
.hidden { visibility: hidden; }

I also tried

. hidden { display: none; }

The content within the <div> tabs shows no matter what I do.

What must I do to:

1) Hide layers by default
2) Show layers ONLY as I click on image link

Thank you all in advance!


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Sort by date Sort by votes
Your first CSS line would have hidden the contents, but reserved the space for the DIV. The second would have done nothing because of the spare inbetween the "." and "hidden".

Remove the space from the second line, and try again. Failing that, can you post your code or a URL to it?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Your code looks ok and should work as is*. What you probably have is another css instruction that beats your because of higher specificity. In order to show/hide the element, you could dynamically manipulate the elements display property with javascript or dynamically switch the classes.

* Your first declaration would still leave the space for the div but would hide it from view. That is what visibility does. Your second declaration would work as you want it to, given that there is no space between the dot and the word hidden, which I believe got there by mistake.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
No luck. Here is the code

Code: 
<style type="text/css">
.smartTable		{
border-collapse:collapse; margin:20px auto;
font-family: "times new roman", serif;
font-size: small;
}
.smartTable th, .smartTable td	{border:1px solid #000000; padding:1px;}
.smartTable th			{background-color:#666666; color:#FFFFFF;}
.smartTable .r0 td	{}
.smartTable .r1 td	{background-color:#F6F6F6;}
.smartTable .over td	{background-color:#FF8800;}
.smartTable .sortedAsc		{background-color:#66CC66 !important;}
.smartTable .sortedDesc		{background-color:#CC6666 !important;}

.hidden { display: none; }

tr.row {
  color: #cc3333;
  background-color: white;
}

td.col {
  border: 1px solid blue;
  padding: 5px;
}

input { 
background-color: #FFFFCC;
}
body {

margin-top: 0px;
padding: 0;
color : #000000;
font-size : 6px;
font-family: courrier, "times new roman", serif;
font-weight: normal;
}
</style>

and the body
Code: 
<body>
<form name="cabsform" action="index.php?Action=sort" method="post">
<table name="tabTable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<div id="container">
<table class="smartTable" width="1000" cellpadding="0" cellspacing="0" border="1">
<tr>
<th>&nbsp;</th>
<th>Company</th>
<th>Phone</th>
<th>Address</th>
<th>City</th>
<th>Add</th>
<th>Edit</th>
<th>Prt</th>
<th>Del</th>
</tr>
<tr id="tblrow1">
<td><img src="images/add.png" border="0" width="15" height="15"></td>
<td>GARTLAN, KATHLEEN</td>
<td>(561) 758-3054</td>
<td>13278 SAINT TROPOLIS CIRCLE</td>
<td>PALM BEACH GARDEN</td>
<td><img src="images/table_add.png" border="0" width="15" height="15"></td>
<td><img src="images/table_edit.png" border="0" width="15" height="15"></td>
<td><img src="images/action_print.gif" border="0" width="15" height="15"></td>
<td><img src="images/table_delete.png" border="0" width="15" height="15"></td>
</tr>
<!--- HERE IS THE DIVISION I WANT TO HIDE --->
<div id="custDetail1" class="hidden">
<tr>
<td colspan="9">
<h2>This is the hidden text 1</h2>
</td>
</tr>
</div>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>

What am I doing wrong?

Thanks,


Jose Lerebours

KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
I put the <div> tabs inside the <td> tags and content does not show but I can see that marginal border.

Can I get rid of it?

Thanks,


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
What on earth possessed you to put the div in that place? No wonder it does not work, because browsers probably just ignore the div is there. What should not be there, they will not render (although that only relates to the div and not to the anything within the correct tags). If you want to show and hide table rows, you should show and hide table rows, not some arbitrary div that you're placing there. Bear in mind though, that modern browsers render table row as display: table-row; and IE (6, not sure about 7) display it as block. You will need to deal with that.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Just because ... :)

Thanks for the follow-up. I will play around with the <tr> tag properties.

Regards,


Jose Lerebours




KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
Why don't you just apply your "hidden" class to the <TR> tag like this?

Code: 
...
<!--- HERE IS THE DIVISION I WANT TO HIDE --->
<tr id="custDetail1" class="hidden">
<td colspan="9">
<h2>This is the hidden text 1</h2>
</td>
</tr>
...

That would solve the whole DIV thing - because in your implementation a DIV isn't needed.

Einstein47
There are no kangaroos in Austria!
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
I did try that but when I click the minus image to hide the row again, the content was hidden but page did not roll-up.

In addition, when I showed the row, every row in the table looked funny (like 2.5 higher than normal).

I put the behavior back in the DIV tag and it works flawlessly except for IE that says

Code: 
document.eval(img).src="images/delete.png";

ERROR: Object does not support this property or method.

I am growing tired of IE (and I've only started to deal with web development). :(

I am inclined to simply say that since this intended to be a custom application, it requires FF as a browser.

Regards,


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
615
198709km
198709km
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
636
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
613
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top