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
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
It should work fine..
Check FIDDLE
JS
HTML