[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

why do you have to click twice to get the divs to show

Posted on 2014-08-22
5
Medium Priority
?
157 Views
Last Modified: 2014-08-22
Hi,

I have this function that works but for some reason you have to click a link twice to get the div to show up.  However, once it does show up then you only have to click the link once.

What am I doing wrong?

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() { 
  $(".MemCovInfo a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
        $(this).closest("div a").addClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");
        $("#recipientId").val(v);
		
     $('.show').click(function () {
    $('.label_copy').hide();
    $('#div' + $(this).attr('target')).show();
       });

  });
});
</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>
<script>
$(document).ready(function() {
  if($("#recipientId").val()==8 ) {
				$("#div8").show();
				$("#contactForm").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==1 ) {
				$("#div1").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==7 ) {
				$("#div7").show();
				$("#contactForm").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==3 ) {
				$("#div3").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==4 ) {
				$("#div4").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==5 ) {
				$("#div5").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==6 ) {
				$("#div6").show();
				$("#contactForm").show();
			
			}
		
})
			</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.active {
background-color:#CCC;

}

.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>

</body>
</html>

Open in new window

0
Comment
Question by:smfmetro10
  • 2
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40279943
Couple of things...
Div's cannot start with a number, HTML5 specs allow it but you are not using HTML5
ID's should start with a letter.

A number is not a valid value for the target attribute.

Only thing I can think of as to why it's not working properly, why it works the second time I don't know.

Before
$('#div' + $(this).attr('target')).show();

add
alert($(this).attr('target'))

What do you get?
0
 

Author Comment

by:smfmetro10
ID: 40279955
I get the number of the target... But, the second time i click it there are two alerts, the third time i click a link there are three alerts etc...
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40279963
You have a click function inside your click function ergo continually adding a new click listener every time you click a link

Change your script to

<script>
$(document).ready(function() { 
  $(".MemCovInfo a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
        $(this).closest("div a").addClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");
        $("#recipientId").val(v);
        $('.label_copy').hide();
        $('#div' + $(this).attr('id')).show();
  });
});
</script>

Open in new window

But the above still applies
0
 

Author Closing Comment

by:smfmetro10
ID: 40279967
Thanks!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 40280146
PS: No need for TWO document.ready and please change

$(".MemCovInfo a").click(function() {

to

$(".MemCovInfo a").click(function(e) {
  e.preventDefault();
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question