chris_s chris_s - 4 months ago 9
jQuery Question

On click() list item, show div with same ID

I have a menu with list items whose ID is associated to a div, each containing content relative to the list items. I am trying to show the content when a particular list item is clicked. I realize the

this
is referring to
#agency ul li
, but I can't seem to get my head around how to reference the content divs.

HTML

<ul id="agency">
<li>Select an Agency</li>
<ul>
<li id="agriculture">Department of Agriculture</li>
<li id="commerce">Department of Commerce</li>
<li id="defense">Department of Defense</li>
<li id="energy">Department of Energy</li>
<li id="health">Department of Health and Human Services</li>
<li id="homeland">Department of Homeland Security</li>
<li id="interior">Department of the Interior</li>
<li id="transportation">Department of Transportation</li>
<li id="veterans">Department of Veteran Affairs</li>
<li id="epa">Environmental Protection Agency</li>
<li id="aeronautics">Nat'l Aeronautics and Space Admin</li>
</ul>
</ul>

<div id="agency-wrap">
<div id="agriculture">
<ul>
<li><a href="http://www.ars.usda.gov/partnering">USDA Agricultural Research Service</a></li>
<li><a href="http://www.ars.usda.gov/business/docs.htm?docid=763&page=3">USDA ARS Tech Transfer Coordinators</a></li>
<li><a href="http://www.fs.fed.us">USDA Forest Service</a></li>
</ul>
</div>
<div id="commerce">
<ul>
<li><a href="http://www.nist.gov/tpo/">DOC Nat'l Institue of Standards and Tech</a></li>
<li><a href="http://www.noaa.gov">DOC Nat'l Ocean and Atmosph Admin</a></li>
<li><a href="http://www.its.bldrdoc.gov/">DOC Institue for Telecom Sciences</a></li>
<li><a href="http://www.nist.gov/mep/">DOC Manufacturing Extension Program</a></li>
</ul>
</div>
<div id="defense">
<ul>
<li><a href="http://www.acq.osd.mil/ott/techtransit">DOD Secretary of Defense</a></li>
<li><a href="http://www.arl.army.mil/main/Main/default.cfm?Action=6">DOD Army Research Lab</a></li>
<li><a href="http://www.onr.navy.mil/en/Sciecne-Technology/Directtorates/Transition/Technology-Transfer-T2aspx">DOD Office Naval Research</a></li>
<li><a href="http://www.wpafb.af.mil/library/factsheets/factsheet.asp?id=6026">DOD Air Force Research Lab</a></li>
<li><a href="http://www.mda.mil/business/tech_apps.html">DOD Missle Defense Agency</a></li>
<li><a href="http://www.jfcom.mil/about/industry.htm">DOD Joint Forces</a></li>
<li><a href="http://www.defenseinnovationmarketplace.mil/index.html">DOD Defense Innovation Marketplace</a></li>
</ul>
</div>
<div id="energy">
<ul>
<li><a href="http://technologytransfer.energy.gov">DOE Tech Transfer Office</a></li>
</ul>
</div>
<div id="health">
<ul>
<li><a href="http://www.ott.nih.gov/">DHHS National Institutes of HealthNIH </a></li>
<li><a href="http://www.cdc.gov/od/ads/techtran/tech.htm">DHHS Centers for Disease Control</a></li>
<li><a href="http://www.fda.gov/ScienceResearch/CollaborativeOpportunities/default.htm">DHHS Food and Drug Administration</a></li>
</ul>
</div>​


JS

$(function() {
$('#agency-wrap > div').addClass('agency-hide');

$('#agency ul li').click(function() {
$("#" + $(this).attr('id')).fadeIn('slow').siblings().hide();
});
});​


CSS

.agency-hide {
display: none;
}
#agency {
width: 300px;
}​


I have not styled the css yet and will take care of that after functionality is complete

http://jsfiddle.net/yD4D5/

Answer

When you access a element with id , the selector engine assumes there is only 1 single ID as this supposed to be unique.. Thats the reason you see this behaviour..

Try replacing the the id with class and change the selector to this

$("." + $(this).data("id")).fadeIn('slow').siblings().hide();

It should work fine..

Check FIDDLE

JS

$(function() {
    $('#agency-wrap > div').addClass('agency-hide');

    $('#agency ul li').click(function() {
        $("." + $(this).attr('id')).fadeIn('slow').siblings().hide();
    });
});​

HTML

<ul id="agency">
            <li>Select an Agency</li>
            <ul>
                <li id="agriculture">Department of Agriculture</li>
                <li id="commerce">Department of Commerce</li>
                <li id="defense">Department of Defense</li>
                <li id="energy">Department of Energy</li>
                <li id="health">Department of Health and Human Services</li>
                <li id="homeland">Department of Homeland Security</li>
                <li id="interior">Department of the Interior</li>
                <li id="transportation">Department of Transportation</li>
                <li id="veterans">Department of Veteran Affairs</li>
                <li id="epa">Environmental Protection Agency</li>
                <li id="aeronautics">Nat'l Aeronautics and Space Admin</li>
            </ul>
        </ul>

    <div id="agency-wrap">
        <div class="agriculture">
            <ul>
                <li><a href="http://www.ars.usda.gov/partnering">USDA Agricultural Research Service</a></li>
                <li><a href="http://www.ars.usda.gov/business/docs.htm?docid=763&page=3">USDA ARS Tech Transfer Coordinators</a></li>
                <li><a href="http://www.fs.fed.us">USDA Forest Service</a></li>
            </ul>
        </div>
        <div class="commerce">
            <ul>
                <li><a href="http://www.nist.gov/tpo/">DOC Nat'l Institue of Standards and Tech</a></li>
                <li><a href="http://www.noaa.gov">DOC Nat'l Ocean and Atmosph Admin</a></li>
                <li><a href="http://www.its.bldrdoc.gov/">DOC Institue for Telecom Sciences</a></li>
                <li><a href="http://www.nist.gov/mep/">DOC Manufacturing Extension Program</a></li>
            </ul>
        </div>
        <div class="defense">
            <ul>
                <li><a href="http://www.acq.osd.mil/ott/techtransit">DOD Secretary of Defense</a></li>
                <li><a href="http://www.arl.army.mil/main/Main/default.cfm?Action=6">DOD Army Research Lab</a></li>
                <li><a href="http://www.onr.navy.mil/en/Sciecne-Technology/Directtorates/Transition/Technology-Transfer-T2aspx">DOD Office Naval Research</a></li>
                <li><a href="http://www.wpafb.af.mil/library/factsheets/factsheet.asp?id=6026">DOD Air Force Research Lab</a></li>
                <li><a href="http://www.mda.mil/business/tech_apps.html">DOD Missle Defense Agency</a></li>
                <li><a href="http://www.jfcom.mil/about/industry.htm">DOD Joint Forces</a></li>
                <li><a href="http://www.defenseinnovationmarketplace.mil/index.html">DOD Defense Innovation Marketplace</a></li>
            </ul>
        </div>
        <div class="energy">
            <ul>
                <li><a href="http://technologytransfer.energy.gov">DOE Tech Transfer Office</a></li>
            </ul>
        </div>
        <div class="health">
            <ul>
                <li><a href="http://www.ott.nih.gov/">DHHS National Institutes of HealthNIH </a></li>
                <li><a href="http://www.cdc.gov/od/ads/techtran/tech.htm">DHHS Centers for Disease Control</a></li>
                <li><a href="http://www.fda.gov/ScienceResearch/CollaborativeOpportunities/default.htm">DHHS Food and Drug Administration</a></li>
            </ul>
        </div>​