i right trying hide 6 divs while showing 1 of divs. i've tried javascript , in jquery, nothing seems work! click here website.
i know if has css, jquery, or html. or there easier way of doing this?
html:
<div id="resourcelinks"> <a href="#" name="resource" id="resource1">general information</a><br /> <a href="#" name="resource" id="resource2">automatic 401(k)</a><br /> <a href="#" name="resource" id="resource3">consumer fraud</a><br /> <a href="#" name="resource" id="resource4">direct deposit</a><br /> <a href="#" name="resource" id="resource5">diversity</a><br /> <a href="#" name="resource" id="resource6">women</a><br /> <a href="#" name="resource" id="resource7">young adults (20s - 40s)</a> </div> <div id="resource1></div> <div id="resource2></div> <div id="resource3></div> <div id="resource4></div> <div id="resource5></div> <div id="resource6></div> <div id="resource7></div>
css:
#resource1, #resource2, #resource3, #resource4, #resource5, #resource6, #resource7 { position: absolute; margin-left: 400px; margin-top: -10px; width: 300px; padding-bottom: 120px; } #resourcelinks { position: fixed; margin-left: -450px; z-index: 3; margin-top: 180px; font-size: 16px; }
jquery:
$(document).ready(function(){ $('#resourcelinks a').click(function (selected) { var getname = $(this).attr("id"); var projectimages = $(this).attr("name"); $(function() { $(".resource").hide().removeclass("current"); $("#" + projectimages ).show("normal").addclass("current"); }); }); });
how one
<div id="resourcelinks"> <a href="#" name="resource" id="resource1">general information</a><br /> <a href="#" name="resource" id="resource2">automatic 401(k)</a><br /> <a href="#" name="resource" id="resource3">consumer fraud</a><br /> <a href="#" name="resource" id="resource4">direct deposit</a><br /> <a href="#" name="resource" id="resource5">diversity</a><br /> <a href="#" name="resource" id="resource6">women</a><br /> <a href="#" name="resource" id="resource7">young adults (20s - 40s)</a> </div> <div class="resource" id="resource1_info"></div> <div class="resource" id="resource2_info"></div> <div class="resource" id="resource3_info"></div> <div class="resource" id="resource4_info"></div> <div class="resource" id="resource5_info"></div> <div class="resource" id="resource6_info"></div> <div class="resource" id="resource7_info"></div> $(document).ready(function(){ $("div.resource:gt(0)").hide(); // hide div except first 1 $('#resourcelinks a').click(function(selected) { var getid = $(this).attr("id"); var projectimages = $(this).attr("name"); $("div.resource").hide(); $("#" + getid + "_info" ).show(); }); });
Comments
Post a Comment