Display:Block and direct hyperlinking to change visibility of div

Question

Folks, I have divs set up that are display:none. There are several. there is a script that is ran that when on link is clicked it changes that particular div to display:block. What I need is a way to use a direct hyperlink to automatically show that particular div. Any Ideas?

Thanks, Plasmagrid

NORMAL HEADER INFORMATION ---------

    <script type="text/javascript" src="http://domainlocation/Scripts/jquery.min.js"></script>

    <script type="text/javascript">
    function showonlyone(thechosenone) {
    $('div[name|="newboxes"]').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
    $(this).show(300);
    }
    else {
    $(this).hide(300);
    }
    });
    }
     </script>

    <BODY>

    <BASEFONT SIZE="2" FACE="Arial">
    <div ALIGN="center">

   <TABLE CELLPADDING=3 BORDER=0 width="900px" style="font-size:14px;">
   <tr>
   <td>
    <div align="center">
    <a class="trbgshdw1" href="javascript:showonlyone('NucleusLst');" id="Nucleus">Nucleus Utilities</a>
    <span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('DisplayLst');" id="Display">Display (Monitor) Drivers</a></span>
   <span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('BiosLst');" id="Bios">Bios Utilities</a></span>
     <span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('CDImgLst');" id="CDImg">CD Imaging Utilities</a></span>
    <span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('DataCapLst');" id="DataCap">Data Capture Utility</a></span>
    <br><br>
    <a class="trbgshdw1" href="javascript:showonlyone('EdgePortLst');" id="EdgePort">EdgePort Drivers / Utilities</a>
    <span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('FTPLst');" id="FTP">FTP Utility</a></span>
    <span style="margin-left:25px;"><a class="trbgshdw1" href="http://asonet.wayne.com/extranet/dl-Fusion.asp" id="Fusion">Fusion</a>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('HostLdrLst');" id="HostLdr">Host Loader Files</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('ModemLst');" id="Modem">Modem Drivers</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('NetworkLst');" id="Network">Network Drivers</a></span>
            <br><br>
            <a class="trbgshdw1" href="javascript:showonlyone('OracleLst');" id="Oracle">Oracle Files / Utilities</a>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('TankMonLst');" id="TankMon">Tank Monitoring Utilities</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('TelnetLst');" id="Telnet">Telnet Utility For ESR</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('ZipUtilLst');" id="ZipUtil">Zip / Unzip Utilities</a></span>
            </div>


    <br>    
<!-- ** NUC **-->
    <div align="left" id="NucleusLst" name="newboxes" style="display: none;"><span style="color:#FFFFFF;font-size:22px;font-weight:bold;line-height:15px;">Nucleus</span>
        <table border="0" cellpadding="3" width="100%">

            <TR bgcolor="#ffffff"> 
                <td align="center" WIDTH="340px"><strong>Filename</strong></td>
                <td align="center" width="*"><strong>Filesize</strong></TH>
                <td align="center" WIDTH="400px"><strong>File Description</strong></Td>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">57 MB</TD>
                <TD>Java 1.5.0.05 <br> It is used for  reloading</TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">116 KB</TD>
                <TD>Diagnostic Files</TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">161 KB</TD>
                <TD>
                    For use with sites which may have difficulty with time change<br>
                    occuring on 11/01/2009.<br>
                </TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">3.83 MB</TD>
                <TD> Installation Files and Instructions</TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">700 KB</TD>
                <TD><br>(replacement for ver4.03 CDs)</TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">56 KB</TD>
                <TD>Matrix (as of 12/13/05)</TD>
            </TR>
            <TR bgcolor="#ffffff">
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">3 KB</TD>
                <TD>Memory upgrade </TD>
             </TR>
        </table>
        </div>


<!-- ** DISPLAY **-->
        <div align="left" id="DisplayLst" name="newboxes" style="display: none;"><span style="color:#FFFFFF;font-size:22px;text-align:left;font-weight:bold:">Display (Monitors)</span>
        <table border="0" cellpadding="3" width="100%">
            <TR bgcolor="#ffffff"> 
                <td align="center" WIDTH="340px"><strong>Filename</strong></td>
                <td align="center" width="*"><strong>Filesize</strong></TH>
                <td align="center" WIDTH="400px"><strong>File Description</strong></Td>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">2.7 MB</TD>
                <TD>Drivers </TD>
            </TR>
             <TR bgcolor="#ffffff"> 
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">3.9 MB</TD>
                <TD>Updated drivers.</TD>
            </TR>
            <TR bgcolor="#ffffff">
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">7 MB</TD>
                <TD> Installation Manual<sup>Draft</sup></TD>
            </TR>
        </table>
        </div>




<!-- ** BIOS **-->
        <div align="left" id="BiosLst" name="newboxes" style="display: none;"><span style="color:#FFFFFF;font-size:22px;text-align:left;font-weight:bold:">B I O S</span>
        <table border="0" cellpadding="3" width="100%">
            <TR bgcolor="#ffffff"> 
                <td align="center" WIDTH="340px"><strong>Filename</strong></td>
                <td align="center" width="*"><strong>Filesize</strong></TH>
                <td align="center" WIDTH="400px"><strong>File Description</strong></Td>
            </TR>
            <TR bgcolor="#ffffff">
                <TD><a href="FILEANDLOCATION" class="font12b">FILE</a><BR><br><a href="FILEANDLOCATION" class="font12b">FILE</a></TD>
                <TD align="center">1 MB<br><br>2 MB</TD>
                <TD><br>To install Bios Version 1.80 Using a Diskette<BR><br>To install Bios Version 1.80 Using a<br>Memory Key,Flash Drive, Thumb Drive</TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD align="center"><a href="FILEANDLOCATION">FILE</a></TD>
                <TD align="center">168 KB</TD>
                <TD>Service Memo </TD>
            </TR>
            <TR bgcolor="#ffffff"> 
                <TD align="center">**********</TD>
                <TD align="center">NA</TD>
                <TD>INFORMAITON TO BE ADDED</TD>
            </TR>
        </table>
        </div>


and so on for more DIVS

If I understand your question correctly, you can show/hide a section on page you go to based on a url param. Try adding the url param in your hyperlink and reading it out on page load via something like this: http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery — Chris Montgomery, Jan 21 '13 at 00:25

score 0 · Answer 1 · answered Jan 21 '13 at 00:30

0

with jquery:

$('a').on('click', function(e) {
    var id = $(this).attr('href');
    $(id).show();

    // or from your example:

    showonlyone(id);

});

If you don't want all links do have the event attached to them you need a way to identify them.

$('a[data-toggle="target"]').on('click', function(e) {
    var id = $(this).attr('href');
    $(id).show();

    // or from your example:

    showonlyone(id);

});

In the previous example you'd be targeting anchors with the attribute data-toggle="target": <a href="#someelementid" data-toggle="target"></a>

or you could target anchors referencing ids: $('table a[href6^="#"]').on(...)

If the anchors are added to the document dynamically: $('table').delegate('a[href6^="#"]', 'click', function(e) {...});

answered Jan 21 '13 at 00:30

Mark Murphy

2,834
1
31
29

i may misunderstood your question...please clairify – Mark Murphy Jan 21 '13 at 00:33
whence i navigate to the page http://someurl.com/page.asp.... that page is set up to have several divs hidden until you click on the appropriate link and then it unhides that div. I would like to to unhide a particular div by sending it in the URL. so if a person navigates to that page and on that page has links(1, 2, 3, 4... one) they have to click on say 1 to get that div to show. I want to send a url with to unhide 1 upon navigating to the page. I know it seems redunant on the message but I am trying to be a clear as possible... Thanks – user1988986 Jan 23 '13 at 08:55

Display:Block and direct hyperlinking to change visibility of div

1 Answers1