I am having a lot of trouble figuring out how to write the appropriate javascript or jquery to show a specific div when my clickable div is clicked, meanwhile hiding all other divs within the same class that were previously clicked.
HTML
<img src="images/Current system & actors.jpg" alt="" usemap="#Map" style="left:275px; position:absolute; top:247px; width:100%; z-index:1; " usermap="#mymap" >
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" style="position:absolute; left:200px; top:200px; " onclick="MM_showHideLayers('crudeoil','','show')" ></div>
<div class="sqtrigger" id="xNP" style="position:absolute; left:300px; top:200px; " onclick="MM_showHideLayers('NP','','show')" ></div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
JAVASCRIPT
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) {
v=args[i+2];
if (obj.style) {
obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v;
}
}
}
I've found information on doing this with <area>
tag however I'd like to avoid rewriting my clickable divs to areas within my map because I have over 100 clickable divs and need a work around solution for now...
Example --> http://jsfiddle.net/berqK/4/
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('x', '');
s = document.getElementById(target_id);
states = document.getElementsByClassName('show');
for (var j = 0; j < states.length; j++) {
states[j].className = '';
}
s.className = 'show';
};
}
So, how can I adjust this code I've found for showing a div when a link is clicked, to showing a div when a div is clicked while still hiding the others?
In reference to my divs ... How can I make id="xcrudeoil" show id="crudeoil" (and xNP show NP) while at the same time hiding all child divs of div id=info (or within class="textbox")?
Here is an sample of what I have working so far. (note: in my browser the divs appear but I can't see them in fsfiddle): http://jsfiddle.net/ZCantrall/Ru82F/6/
Thanks a lot in advance! I'd really appreciate ANY advice that you can offer.
*EDIT // Second attempt with the CSS from /jsfiddle.net/Ru82F/7/ and the following HTML & JS
<html><head>
<title>IES</title>
<link href="IES.css" rel="stylesheet" media="screen" type="text/css" >
</head>
<body>
<div id="items" >
<div class="sqtrigger" id="xcrudeoil" >Oil</div>
<div class="sqtrigger" id="xNP" >NP</div>
</div>
<div id="info" >
<div id="crudeoil" class="textbox" >Crude oil description </div>
<div id="NP" class="textbox" >NP description</div>
</div>
<script> src="jquery-1.9.1.js" </script>
<script> src="jquery-migrate-1.1.0.js" </script>
<script>
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
</script>
</body></html>
This small jQuery script will show the relevant div and hide the others when you click the triggers (there might be issues with the css, I removed it for this test):
$(document).ready(function() {
$('.sqtrigger').on('click', function(e) {
var targetId = this.id.replace('x', '');
$('#info .textbox').hide();
$('#' + targetId).show();
});
});
Could you please try this... http://jsfiddle.net/berqK/22/
JQuery Code...
var links = document.getElementById('oshastatemap');
for (var i = 0; i < links.children.length; i++) {
links.children[i].onclick = function(ev) {
target_id = this.id.replace('State', 'Layer');
$("div[Id^='Layer']").css('display','none');
$('#'+target_id).show();
};
}
This small jQuery script will show the relevant div and hide the others
$("target_div").nextAll().hide() $("target_div").prevAll().hide()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.