Solved

how do you show and hide text with multiple div's

Posted on 2014-07-29
9
733 Views
Last Modified: 2014-08-14
Hi,

I am stuck with a jquery function.

I have multiple div's that need to show and hide text based on a <a href> onclick but have no idea how to start this one.

Should it start with a class instead of an id for the jquery?

Any help would be greatly appreciated.

Here is the html part of the code.
 <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#MemCovInfo {
width:685px;
}
#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: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: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:hover {
	color:#000;
	}
	
	.subhead {
	font-size:12px;
	}
	
.contact_nav_members {
    text-align: left;
    background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 0px 15px 5px 5px;
	width:185px;
	height:95px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
margin-left:-45px;
margin-top:-25px;
width:705px;
}


</style>
</head>

<body>
<br/><br/>
<div id="MemCovInfo">		
	<div id="ForMembers" >
    <span style="font-size:20px; font-family:Georgia, "Times New Roman", Times, serif;">For Members</span><br/>
                    <a href="#report" style="font-size:12px;">Report</a><br/>
    	            <a href="#member" style="font-size:12px;">Services</a><br/>
                   <a href="#patient" style="font-size:12px;">Safety</a>
                    </div>
    	<div id="Coverage">
    	 <span style="font-size:20px; font-family:Georgia, "Times New Roman", Times, serif;">Looking For Coverage</span><br/>
    	 <a href="#quote" style="font-size:12px;">Quote</a><br/>
    	 <a href="#coverage" style="font-size:12px;">Apply</a><br/>
    	 <a href="#agent" style="font-size:12px;">Agent</a><br/>
    	</div>
    	<div id="GenInfo">
    <span style="font-size:20px; font-family:Georgia, "Times New Roman", Times, serif;">General Information</span><br/>
    	<a href="#contact" style="font-size:12px;">Contact us by email</a><br/>
    	</div>
  
 
     <div id="report" class="label_copy">
 <p>Report info
</p>
    </div>
  <div id="member" class="label_copy">
 <p>Member info</p>
    </div>
    <div id="patient" class="label_copy">
 <p>Patient info.</p>
 </div>
 <div id="patient" class="label_copy">
 <p>Patient info.</p>
 </div>
 <div id="quote" class="label_copy">
 <p>Patient info.</p>
 </div>
 <div id="coverage" class="label_copy">
 <p>Patient info.</p>
 </div>
 <div id="agent" class="label_copy">
 <p>Patient info.</p>
 </div>
  
 <div id="contact" class="label_copy">
 <p>Contact info</p>
    </div>


 <div id="agent" class="label_copy">
Agent info
 </div>

</div>

Open in new window

0
Comment
Question by:smfmetro10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40227655
What do you want to show and hide?  Do you want to show and hide separately or affect all elements at once?
0
 

Author Comment

by:smfmetro10
ID: 40227744
I would like to show and hide separately.  Thanks!
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40227827
Here is one way to do it.  There are many jQuery effects for things like this.  You can see the code in action here:
http://iconoun.com/demo/temp_smfmetro10.php

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function(){
    $("#target").hide();
    $("#signal").click(function(){
        $("#target").toggle(500);
    });
});
</script>

<title>HTML5 Page with Show/Hide Demonstration</title>
</head>
<body>

<div id="target">This is the target DIV</div>
<div id="signal">Click on me!</div>

</body>
</html>

Open in new window

0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

Author Comment

by:smfmetro10
ID: 40227855
Thanks for the reply. Is it the same function when I have these nest div's... Do I need nested div's to get the same look?

Thanks!
0
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40227889
You might experiment with the simplified script a little bit.  The most important part will be getting the selectors correct.  In the example above, #target is the jQuery selector that corresponds to the id="target" in the div tag.

If you wanted to hide the contents of the div but preserve its spacing, you might try making it transparent with the fade() effect.
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40259212
Please explain the bad grade, thanks.
0
 

Author Comment

by:smfmetro10
ID: 40259577
Didn't seem to have an in depth solution to the problem... But rather "try to figure it out" solution...
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40259584
It's considered good etiquette to ask for clarification or explain what is missing from a solution before giving the worst possible grade anyone can give at Experts-Exchange.  The expert you're giving the bad grade to may be the one who knows the answer to your next question, eh?

Here are the grading guidelines.  Worth understanding.
http://support.experts-exchange.com/customer/portal/articles/481419

In the instant case you got a tested and working code example and a link to the test case on my server.
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40260071
The most important part will be getting the selectors correct.
If this had been my assignment, this is something I might have tried.  Please see lines 24, 30.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function(){
    $("#target").hide();
    $("#signal").click(function(){
        $("#target").toggle(500);
    });
});
</script>

<title>HTML5 Page with Show/Hide Demonstration</title>
</head>
<body>

<!-- CREATE SOME NESTING DIVS -->
<div><div id="a">

<div id="target">This is the target DIV</div>
<div id="signal">Click on me!</div>

<!-- TIE OFF THE NESTING DIVS -->
</div></div>

</body>
</html>

Open in new window

0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

742 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