How do you show a div based on a URL parameter and have an "active" state part of an <a href> tag?

Hi,
 I have a Jquery function (thanks to Gary!).

I got it to work with some Idoc script and Java beans on the back end but now it is not quite doing what its supposed to do.

For some reason when you load the page and click one of the links the "contact info" div is the first one that always appears ( regardless of what you clicked).

Also I would like the active state to match the hover state (with the link turning black).

and finally, the corresponding div should automatically show when the parameter matches it. ( i.e. with there is a "?recipientId=5" then the Agent Info div should automatically show.

It's so close!!

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function() { 
  $("div a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");
        $("#recipientId").val(v);
		   lhash=location.hash
		if(lhash==""){
			lhash="#div6"
		}

		$("a[href='"+lhash+"']").closest("div").addClass("active");
		$(lhash).show();
		if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
	$("#contactForm").show();
		}
	else {
		$("#contactForm").hide ();
	}		
$('.show').click(function () {
    $('.label_copy').hide();
    $('#div' + $(this).attr('target')).show();
});

$('.hide').click(function () {
    $('.label_copy').hide();
});
  });
});
</script>

<script>
$(document).ready(function() { 
url = window.location.search.substring(1);  
urlvars = url.split('&');  
for (i = 0; i < urlvars.length; i++){  
    param = urlvars[i].split('=');  
    if (param[0] == "subjectId"){  
        $("#recipientId").val(param[1]) 
    }  
}
})
</script>



<style>
a.active { 
color:black;
 }
 .link.active { 
color:black;
 }

.ForMembers a {
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
.MemCovInfo.active {
background-color:#CCC;
width:685px;
}
.MemCovInfo {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
	} 
	
	.MemCovInfo a {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    cursor:pointer;
	}
.MemCovInfo a:hover {
color:#000;
}
.MemCovInfo a.active {
color:#000;
}


.MemCovInfo:hover {
background-color:#CCC;
 color:#000;
 cursor:pointer;
}

.show.active {
color:#000;
}



#ForMembers {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
	} 
	
	#ForMembers a {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    cursor:pointer;
	}
#ForMembers a:hover {
color:#000;
}
#ForMembers a.active {
color:#000;
}
#ForMembers.active {
background-color:#CCC;
}

#ForMembers:hover {
background-color:#CCC;
 color:#000;
 cursor:pointer;
}

	#Coverage {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
    width:200px;
	height:95px;	
	margin-left:205px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	#Coverage:hover {
background-color:#CCC;
 cursor:pointer;
}
	#Coverage a  {	
	 font-family:Georgia, "Times New Roman", Times, serif;
   font-size:20px;
   color:#FFF;
	}
	
	#Coverage a.active {
color:#000;
}
#Coverage.active {
	background-color:#CCC;
}
	#Coverage a:hover  {
   color:#000;
	}	
	#GenInfo {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:190px;
	height:95px;
	font-size:14px;
	margin-left:430px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	
	#GenInfo:hover {
	background-color:#CCC;
 cursor:pointer;
 }	
#GenInfo a  {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
  font-size:20px;
	}
		#GenInfo a.active {
color:#000;
}
#GenInfo.active {
	background-color:#CCC;
}
	#GenInfo a:hover {
	color:#000;
	}
	#contactForm {
		display:none;
	}
	
	.label_copy {
	display:none;
	}
</style>
</head>

<body>
<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
  
   <a id="1" class="link show" target="1" style="font-size:12px;">Report</a><br/>

 <a id="7" class="link show" target="7" style="font-size:12px;">Member </a><br/>
 
  <a id="8" class="link show" target="8" style="font-size:12px;">Patient </a>
  </div>
    	<div id="Coverage" class="MemCovInfo">
    	
    	  <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>
   	 
   	  <a id="3" class="link show" target="3" style="font-size:12px;">Get a Quote</a><br/>
   
    <a id="4" class="link show" target="4"  style="font-size:12px;">Apply for Coverage</a><br/>
    	   
    	   <a id="5" class="link show" target="5"  style="font-size:12px;">Find an Agent</a>
  	    
    	</div>
    	
    	<div id="GenInfo" class="MemCovInfo">
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
    	
    	 <a id="6" class="link show" target="6" style="font-size:12px;">Contact us by email</a>
    	
    	</div>
  
<div id="div1" class="label_copy">
<p>claim info</p>
</div>



  
   <div id="div7" class="label_copy">
  <p>member info</p>
 </div>
  
 
<div id="div8" class="label_copy">
<p>Patient info</p>
</div>


<div id="div3" class="label_copy">
<p>Quote info</p>
</div>


<div id="div4" class="label_copy">
<p>Coverage info</p>
</div>

<div id="div5" class="label_copy">
<p>Agent info</p>
</div>

<div id="div6" class="label_copy">
<p>contact info</p>
</div>

<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />
 
        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl">
      
        <input type="hidden" id="recipientId" name="recipientId" value=""/>
    

  		<!-- Subject ------------------->
    	<div style="margin-bottom:10px;">
    	  <label for="emailSubject">Subject:</label><br />
          <input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />

        </div>
        
        <!-- Email ------------------->
		<div style="margin-bottom:10px;">
        	<label for="emailAddress">E-mail:</label><br />
    
        	<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />

        </div> 
        
        <!-- Message ------------------->
		<div style="margin-bottom:10px;">
        	<label for="txt_Message">Message:</label><br />
       	<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>
        </div>
</body>
</html>

Open in new window

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
If I'm understanding correctly what you are trying to accomplish, this version works. I added an else condition, moved a line and commented out two lines.
<script>
$(document).ready(function() { 
  $("div a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");console.log('anchor clicked, Id: ' + $(this).attr("id"));
        $("#recipientId").val(v);
		   lhash=location.hash;
		if(lhash!==""){
			$(lhash).show();
			//lhash="#div6";
		}else{			
			$('#div' + $(this).attr('target')).show();
		}

		$("a[href='"+lhash+"']").closest("div").addClass("active");
		//$(lhash).show();
		if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
	        $("#contactForm").show();
		}else {
		    $("#contactForm").hide ();
	}		
	$('.show').click(function () {
		$('.label_copy').hide();
		$('#div' + $(this).attr('target')).show();
	});
	
	$('.hide').click(function () {
		$('.label_copy').hide();
	});
  });
});
</script>

Open in new window

0
MurfurFull Stack DeveloperCommented:
The contact info is the first to appear because you told it to (lines 16 & 17) and this is because have you base HTML wrong.

Each A link has no HREF attribute i.e. the destination anchor name, page or site address.
Each A link has an illegal TARGET attribute - should be _self (this page), _blank (a blank page) etc.

So location.href will always be blank in your jQuery line 16 hence lhash.show() always shows #div6, the contact info.

Secondly, using location.href will get the #ID from the URL so if you change your mind and click on a different link you will always get the same value, so possibly better to get attributes from the link itself.

$("a[href='"+lhash+"']").closest won't do anything because you don't have any A tags with the attribute HREF

Not quite sure what you were trying to achieve with the $('.show').click function but because all the links have class 'show' this also fires when you click a link, undermining the work in the previous function.

I've modified your code and it works as best as I can figure your logic (!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$(document).ready(function() {
	
		$("div a").click(function() {

			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$(this).closest("div").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

		//	lhash = location.hash;
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}		

//			$('.show').click(function () {
//				$('.label_copy').hide();
//				$('#div' + $(this).attr('href')).show();
//			});
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

	});
</script>

<script>
	$(document).ready(function() {

		url = window.location.search.substring(1);
		urlvars = url.split('&');

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "subjectId"){  
				$("#recipientId").val(param[1]) 
			}  
		}
	})
</script>

<style>
	a.active { 
		color:black;
	}
	.link.active { 
		color:black;
	}
	
	.ForMembers a {
		font-size:12px;
		font-family:Georgia, "Times New Roman", Times, serif;
	}

	.MemCovInfo.active {
		background-color:#CCC;
		width:685px;
	}

	.MemCovInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	.MemCovInfo a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	.MemCovInfo a:hover {
		color:#000;
	}

	.MemCovInfo a.active {
		color:#000;
	}

	.MemCovInfo:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	.show.active {
		color:#000;
	}

	#ForMembers {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	#ForMembers a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	#ForMembers a:hover {
		color:#000;
	}

	#ForMembers a.active {
		color:#000;
	}

	#ForMembers.active {
		background-color:#CCC;
	}
	
	#ForMembers:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	#Coverage {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:200px;
		height:95px;	
		margin-left:205px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-color:#CCC;
	cursor:pointer;
	}

	#Coverage a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
		color:#FFF;
	}
	
	#Coverage a.active {
		color:#000;
	}

	#Coverage.active {
		background-color:#CCC;
	}

	#Coverage a:hover  {
		color:#000;
	}	

	#GenInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:190px;
		height:95px;
		font-size:14px;
		margin-left:430px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}
	
	#GenInfo:hover {
		background-color:#CCC;
		cursor:pointer;
	}	
	#GenInfo a  {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
	}

	#GenInfo a.active {
		color:#000;
	}

	#GenInfo.active {
		background-color:#CCC;
	}

	#GenInfo a:hover {
		color:#000;
	}

	#contactForm {
		display:none;
	}
	
	.label_copy {
		display:none;
	}
</style>

</head>

<body>

	<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" target="_self" class="link show" style="font-size:12px;">Report</a><br/>
		<a id="7" href="#7" target="_self" class="link show" style="font-size:12px;">Member </a><br/>
		<a id="8" href="#8" target="_self" class="link show" style="font-size:12px;">Patient </a>

	</div>

	<div id="Coverage" class="MemCovInfo">
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>

		<a id="3" href="#3" target="_self" class="link show" style="font-size:12px;">Get a Quote</a><br/>
		<a id="4" href="#4" target="_self" class="link show" style="font-size:12px;">Apply for Coverage</a><br/>
		<a id="5" href="#5" target="_self" class="link show" style="font-size:12px;">Find an Agent</a>
	
	</div>
	
	<div id="GenInfo" class="MemCovInfo">

		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" target="_self" class="link show" style="font-size:12px;">Contact us by email</a>
	
	</div>

	<div id="div1" class="label_copy">
		<h2>claim info</h2>
	</div>

	<div id="div7" class="label_copy">
		<h2>member info</h2>
	</div>

	<div id="div8" class="label_copy">
		<h2>Patient info</h2>
	</div>

	<div id="div3" class="label_copy">
		<h2>Quote info</h2>
	</div>

	<div id="div4" class="label_copy">
		<h2>Coverage info</h2>
	</div>

	<div id="div5" class="label_copy">
		<h2>Agent info</h2>
	</div>

	<div id="div6" class="label_copy">
		<h2>contact info</h2>
	</div>

	<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />

        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl" />
        <input type="hidden" id="recipientId" name="recipientId" value="" />

  		<!-- Subject -->
    	<div style="margin-bottom:10px;">

			<label for="emailSubject">Subject:</label><br />
			<input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />

        </div>

        <!-- Email -->
		<div style="margin-bottom:10px;">

			<label for="emailAddress">E-mail:</label><br />
			<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />

        </div> 

        <!-- Message -->
		<div style="margin-bottom:10px;">

			<label for="txt_Message">Message:</label><br />
			<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>

        </div>
        
	</form>

</body>
</html>

Open in new window



References FYI:
http://www.w3schools.com/tags/tag_a.asp
http://www.w3schools.com/tags/att_a_target.asp
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smfmetro10Author Commented:
Murfur, Thanks for the reply.

Is it possible to automatically show a div based on the url parameter... if the url has ?recipientId=6 then the contact info will show. and the active state match the hover state?

The link that was clicked will stay black?

Thanks!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MurfurFull Stack DeveloperCommented:
Yes, under $(document).ready(function() { the first line should be  $("#contactForm").show(); i.e. OUTSIDE the click function
0
smfmetro10Author Commented:
hmm... I dont think I have explained the question well enough.
 What I'm trying to do is show the corresponding div based on the URL.  For example if the URL has "?recipientId=8"  then "Patient info" will show
0
MurfurFull Stack DeveloperCommented:
Ah, in that case here's a query plugin I found somewhere a few months ago and have used since:

(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

Open in new window

Then you reference it thus:
var recipient = $.QueryString["recipientId"];
if(recipient == "8") {
    $("#contactForm").show();
}

Open in new window

0
smfmetro10Author Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.