I have an unordered list with anchors living in widgets. This widget can be placed anywhere on the screen by the user. The user must click the li element and a hidden div will appear. My script usually handles a fixed position, which can be a problem if the user moves this width to another location on the screen. I am looking for a plugin or some recommendations on how to make this the most flexible, given the circumstances. Any help would be greatly appreciated.
Here is my code. CSS pretty straightforwardly handles absolute positioning.
$(document).ready(function(){
$("a#link1").click(function(){
$("a#link2").removeClass("on");
$("#linkContentsWrap2").hide();
$(this).addClass("on");
$("#linkContentsWrap").show();
return false;
});
$("a#link2").click(function(){
$("a#link1").removeClass("on");
$("#linkContentsWrap").hide();
$(this).addClass("on");
$("#linkContentsWrap2").show();
return false;
});
});
$(document).click(function(e){
if (!$(e.target).parents().filter('#linkContentsWrap').length) {
$("a#link1").removeClass("on");
$("#linkContentsWrap").hide();
}
});
$(document).click(function(e){
if (!$(e.target).parents().filter('#linkContentsWrap2').length) {
$("a#link2").removeClass("on");
$("#linkContentsWrap2").hide();
}
});
Bryan source
share