How to view hidden <span> by selecting a link earlier in document? - php

Question

I don't even know if I'm doing this correctly, but I thought I'd ask to get a better opinion. Basically what I've done is this: created an information/navigation bar that expands depending on tab clicked by the user. What I'm trying to add is the functionality to expand a certain tab and be forwarded to it (like what this link would do: <a href="#contactus">) based on a link earlier on the same page. I can't seem to do it. The tab that should be opened is contained within a <ul><li> list and is hidden. I'll include the code:
<div id="tab1">
<ul class="tablinks">
<li><span>Check-Out</span></li>
<li><a onClick="show('tab2')">Payment</a></li>
</ul>
<table>
<tr>
<td><img alt=Check-Out src="http://link.com/images/checkouticon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
<!-- tab 2 -->
<div id="tab2">
<ul class="tablinks">
<li><a onClick="show('tab1')">Check-Out</a></li>
<li><span>Payment</span></li>
</ul>
<table>
<tr>
<td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
This is the CSS that affects it:
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}
#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}
ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}
ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}
ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}
ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}
ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}
ul.tablinks li a:active{
text-decoration:underline;
}
div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}
div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}
And last but not least this is the code that is within a .php external file that affects the hidden aspect of the tabs:
function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
//document.getElementById(id).style.display = "inline";
document.getElementById(id).style.display = "block";
}
}
function hide(){
if(ie5 || ns6){
document.getElementById('tab1').style.display = "none";
document.getElementById('tab2').style.display = "none";
document.getElementById('tab3').style.display = "none";
document.getElementById('tab4').style.display = "none";
document.getElementById('tab5').style.display = "none";
document.getElementById('tab6').style.display = "none";
document.getElementById('tab7').style.display = "none";
}
}
So the idea is to be able to insert a link earlier in the document to open the "Payment" tab. I tried something like this: Payment Information and changed the tags for the list to: <li><span name="payments">Payments</span></li>. This didn't work unless I had already clicked on the "Payments" tab and opened it and then clicked on the link. Then my screen would scroll down and focus on that area. Is there a way to have the screen scroll down and view the <span> without having to 'open' it first?
Thanks for all your help in advance. And I should note, that while I do have some ability with HTML, Javascript, and PHP, I'm still learning and don't know all of the best ways of doing things.

Answer 1

The best (and easiest) way to code this is to use a JS framework like jQuery. It'll help tremendously in normalizing the browser differences.
But if that's not an option, let's try to fix the existing code. Payment Information will jump to an element with the id="payments", not name. Once you fix that, add an onClick="show('tab2')" to that <a>.
In the show function, what is the point of this code if(ie5 || ns6)? This is basically saying, if it's IE5 or Netscape6, then show the element (assuming the variable ie5 and ns6 are set properly somewhere of course). Try removing this, I don't think you need it.