Show/Hide control - is it possible to show a control and hide another 1

[RMcCallan]

I currently have a show/hide control with 3 hyperinks and 3 tables - obviously each in linked to a table and when the hyperlink is clicked the relevant table is shown/hidden. My problem is that it is possible to open all 3 tables at the same time and I do not want the user to be able to do this. Is it possible to set the control to hide the other 2 tables if they are open when the other table is clicked?

Thanks,
Rebecca

 

[BillyRayPreachersSon]

Yes. But to tell you how, we'd need to see your code or a URL to it.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[RMcCallan]

My code is as follows - There are 2 more tables below 'table1' which are called 'table2' and 'table3' but I didn't see the point in posting those as they are in exactly the same format as 'table1:

<asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server"><table style="width: 100%";>
<tr>
<td style="width: 267px; text-align: left;">
<script type="text/javascript">
function setTable(what) {
if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
}
else if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
}
}
</script>
<a href="#" onclick="setTable('table1');return false">2009 t.o.s Tour Event 3 & 4</a>
<br />
<br />
<a href="#" onclick="setTable('table2');return false">2008 t.o.s Tour Event 3 & 4</a>
<br />
<br />
<a href="#" onclick="setTable('table3');return false">New Pictures</a>
<br />
<br />
(Click to open and close Galleries)<br />

</td>
<td style="text-align: center;">
<!--First Table-->
<table id = "table1" style="border-style: none; border-color: inherit; border-width: medium; border-collapse: collapse; display: yes; width: 1077px;"
align="center" class="style3">
<tr>
<td style="border-style: none; border-width: 1px; padding: 1px 4px; width: 260px; text-align: center;" valign="top">
<asp:Image ID="Image1" runat="server" Height="141px"
ImageUrl="~/Gallery/Thumbnails/a/thumb1a.jpg" Width="218px" />


Thanks for the reply!

Thanks,
Rebecca

 

[BillyRayPreachersSon]

You're already testing to see if the table you clicked is shown / hidden... simply extend this logic to the other two tables as well.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[RMcCallan]

I don't really understand what you mean by that?

Thanks,
Rebecca

 

[BillyRayPreachersSon]

It's a given that you only need to check the other tables when opening any table, as that will be the only time you could have more than one table open. So, in the initial "open" branch:

if (document.getElementById(what).style.display == "none") {
   ...
}

why not simply close all 3 tables before opening the one you want?

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[RMcCallan]

Oh right ok, thanks but how do you tell it which you want open and which closed? I am quite new to this and I didn't write this myself, presumably the '(what)' refers to which ever hyperlink has been clicked so how do you then refer to the others which haven't been clicked?

Thanks for your help

Thanks,
Rebecca

 

[BillyRayPreachersSon]

Aah sorry - I assumed that when you said 'my code' that you had written the code

This is what I meant:

function setTable(what) {
    if (document.getElementById(what).style.display == "none") {
        [!]// Hide all tables
        document.getElementById("table1").style.display = "none";
        document.getElementById("table2").style.display = "none";
        document.getElementById("table3").style.display = "none";
        
        // Before opening the one we clicked on[/!]
        document.getElementById(what).style.display = "block";
    } else if (document.getElementById(what).style.display == "block") {
        document.getElementById(what).style.display = "none";
    }
}

Obviously if you start adding more tables, using a loop might be better for keeping the code size down.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[RMcCallan]

Oh right! Thanks very much. I actually put them on seperate pages in the end but now you have answered this I will be able to put them all on one page and save space/loading time. Thank you!

Thanks,
Rebecca