Toggle Box

Discussion in 'HTML & Website Design' started by Borian, Sep 22, 2010.

  1. #1
    I'm not sure how many people still use toggle box but I have a website that I am using it on and have a bit of trouble with two different things.

    First thing,
    My toggle box code works well, but my customer would like it to automatically close the toggle box when he selects another in the list.

    For example.

    Select Douglas Fir and it opens toggle box.
    Select Western Red Cedar and it closes prior toggle box and opens new one


    Second thing,
    I have a graphic image that is being displayed on the screen. In every web browser except for Firefox the toggle box text displays below the graphic image. In Firefox only the text displays over the top of the graphic. It seems strange to me to have something like that happen. So I thought I would ask.

    Code for toggle box below - sorry for the mess:

    <p>

    <span style="margin: 15px; text-decoration: underline; font-size: 14px"><strong>Native Conifer Seedlings<span style="text-decoration: underline; font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <img alt="" height="291" src="../images/firrunp1.jpg" style="float: right" width="369" /><br/>
    </span> </strong> </span>
    <br/><br/>

    <!-- ------------------------------------------------------------------------------------------------------------------------- -->
    <span style="margin: 15px"><a onclick="toggleblock('DouglasFir');" title="DouglasFir">Douglas Fir</a></span><br/>

    </p>
    <div id="DouglasFir" style="display: none">
    <table width="95%" border="0" cellpadding="2" cellspacing="2" style="margin: 15px">
    <tr><td colspan="9" align="center" class="spechdr">Douglas Fir</td></tr>
    <tr>
    <td class="style8">Seed Zone</td>
    <td align="center" class="style8">Size</td>
    <td align="center" class="style8">Type</td>

    <td align="center" class="style8">Per Tree</td>
    <td align="center" class="style8">First 100</td>
    <td align="center" class="style8">Per Hundred up to 700</td>
    <td align="center" class="style8">Per Hundred 800+</td>
    <tr><td>202-.5</td> <td align="center">7"-12"</td> <td align="center">#2 PLUG</td> <td align="center">$0.75</td> <td align="center">$46.00</td> <td align="center">$33.00</td> <td align="center">$230.00</td> <tr><td>202-.5</td> <td align="center">7"-12"</td> <td align="center">PLUG + 1</td> <td align="center">$1.10</td> <td align="center">$77.00</td> <td align="center">$55.00</td> <td align="center">$390.00</td> <tr><td>202-.5</td> <td align="center">7"-12"</td> <td align="center">2-O</td> <td align="center">$1.00</td> <td align="center">$58.00</td> <td align="center">$41.00</td> <td align="center">$290.00</td> </tr>

    <tr><td>221-.5</td> <td align="center">12"-24"</td> <td align="center">PLUG + 1</td> <td align="center">$1.10</td> <td align="center">$77.00</td> <td align="center">$55.00</td> <td align="center">$390.00</td> </tr>
    <tr><td>01/05/41</td> <td align="center">7"-12"</td> <td align="center">#2 PLUG</td> <td align="center">$0.75</td> <td align="center">$46.00</td> <td align="center">$33.00</td> <td align="center">$230.00</td> </tr>

    <tr><td>231-.5</td> <td align="center">231-.5</td> <td align="center">#8</td> <td align="center">$0.80</td> <td align="center">$57.00</td> <td align="center">$41.00</td> <td align="center">$285.00</td> </tr>
    <tr><td>412-2.0</td> <td align="center">412-2.0</td> <td align="center">#2</td> <td align="center">$0.80</td> <td align="center">$57.00</td> <td align="center">$41.00</td> <td align="center">$285.00</td> <tr><td>412-2.0</td> <td align="center">412-2.0</td> <td align="center">#2 PLUG</td> <td align="center">$0.75</td> <td align="center">$46.00</td> <td align="center">$33.00</td> <td align="center">$230.00</td> <tr><td>412-2.0</td> <td align="center">412-2.0</td> <td align="center">PLUG + 1</td> <td align="center">$1.10</td> <td align="center">$77.00</td> <td align="center">$55.00</td> <td align="center">$390.00</td> </tr>

    <tr><td>411-2.0</td> <td align="center">7"-12"</td> <td align="center">#2 PLUG</td> <td align="center">$0.75</td> <td align="center">$46.00</td> <td align="center">$33.00</td> <td align="center">$230.00</td> </tr>
    <tr><td>440-1.0</td> <td align="center">9"-22"</td> <td align="center">PLUG + 1</td> <td align="center">$1.00</td> <td align="center">$71.00</td> <td align="center">$50.00</td> <td align="center">$355.00</td> </tr>

    <tr><td colspan="8"><br/></td></tr>
    </table>
    </div>


    <!-- ------------------------------------------------------------------------------------------------------------------------- -->
    <span style="margin: 15px"><a onclick="toggleblock('WesternRedCedar');" title="WesternRedCedar">Western Red Cedar</a></span><br/>
    </p>
    <div id="WesternRedCedar" style="display: none">
    <table width="95%" border="0" cellpadding="2" cellspacing="2" style="margin: 15px">
    <tr><td colspan="9" align="center" class="spechdr">Western Red Cedar</td></tr>

    <tr>
    <td class="style8">Seed Zone</td>
    <td align="center" class="style8">Size</td>
    <td align="center" class="style8">Type</td>
    <td align="center" class="style8">Per Tree</td>
    <td align="center" class="style8">First 100</td>

    <td align="center" class="style8">Per Hundred up to 700</td>
    <td align="center" class="style8">Per Hundred 800+</td>
    <tr><td>201-.5</td> <td align="center">6"-10"</td> <td align="center">#4 PLUG</td> <td align="center">$1.00</td> <td align="center">$62.00</td> <td align="center">$44.00</td> <td align="center">$310.00</td> <tr><td>201-.5</td> <td align="center">6"-10"</td> <td align="center">PLUG + 1</td> <td align="center">$1.25</td> <td align="center">$95.00</td> <td align="center">$69.00</td> <td align="center">$485.00</td> </tr>

    <tr><td>221-.5</td> <td align="center">5"-8"</td> <td align="center">#2 PLUG</td> <td align="center">$0.85</td> <td align="center">$52.00</td> <td align="center">$37.00</td> <td align="center">$260.00</td> <tr><td>221-.5</td> <td align="center">5"-8"</td> <td align="center">PLUG + 1</td> <td align="center">$1.25</td> <td align="center">$95.00</td> <td align="center">$69.00</td> <td align="center">$485.00</td> </tr>

    <tr><td>430-2.0/4.0</td> <td align="center">5"-8"</td> <td align="center">#2 PLUG</td> <td align="center">$0.85</td> <td align="center">$52.00</td> <td align="center">$37.00</td> <td align="center">$260.00</td> <tr><td>430-2.0/4.0</td> <td align="center">5"-8"</td> <td align="center">PLUG + 1</td> <td align="center">$1.25</td> <td align="center">$95.00</td> <td align="center">$69.00</td> <td align="center">$485.00</td> </tr>

    <tr><td colspan="8"><br/></td></tr>
    </table>
    </div>
     
    Borian, Sep 22, 2010 IP