Solved

Accordian div expansion when a radio button is clicked

Posted on 2010-09-03
6
330 Views
Last Modified: 2012-05-11
I have found several good accordian div expanders, but all work using an anchor tag. I need a div to expand when when a radio button is selected. I have a form question that has three possible radio button answers. If answer 1 or answer 2 is selected, I want the div to expand. If radio button 3 is selected, I want nothing to happen.

I am using jQuery for other functions on the page, but I am open to any process to make this happen. The page is using PHP.

I appreciate your help

Brian
0
Comment
Question by:birwin
[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
  • 3
  • 3
6 Comments
 
LVL 22

Expert Comment

by:kadaba
ID: 33602236
I am not sure how you are using an accordion, but opening an accordion div can be done this way.

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
	$("input[name = answer]").click(function(){
		if($(this).val() != 3){
			$("#accordion").accordion( "option", "active", 1 );
		}
	});
  });
  </script>
</head>
<body >



<input type="radio" name="answer" id="ans1" value="1"> 1 <br>
<input type="radio" name="answer" id="ans2" value="2"> 2 <br>
<input type="radio" name="answer" id="ans3" value="3"> 3 <br> 	
  
<div id="accordion" style="font-size:62.5%;">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	
</div>

</body>
</html>

Open in new window

0
 
LVL 6

Author Comment

by:birwin
ID: 33602517
Hi kadaba:
Thank you so much for such complete code. Actually my need is simpler than that. I am trying to get a single div, without a visible header, to open when either 1 or 2 is clicked and have nothing show otherwise.
The div is going to hold some additional form fields that relate to the option clicked. I was going to make them both the same, but some difference would be handy if it is possible to have separate divs open, depending on whether 1 or 2 is clicked, but the idea is that the user has no idea the accordian is there until they click on radio button 1 or 2.
I tried to hack your code to achieve this, but I wasn't successful.
Brian
0
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33602546
Something like this...

<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
			
	<script type="text/javascript">
		
	$(document).ready(function() {
		$("input[name = answer]").click(function(){
			$(".answer").hide();
			if($(this).val() != 3){
				$(".answer").show("slide", { direction: "up" }, 1000);
			}
		});
	
	});

	</script>
	<style type="text/css">
	.answer{
		background-color:green;
		color:white;
		font-weight:bold;
		display:none;
		width:400px;
		height:100px;
	}	
	</style>
</head>
<body>

<div>First line of program<div>
<input type="radio" name="answer" id="ans1" value="1"> Hello World <br>
<input type="radio" name="answer" id="ans2" value="2"> Hello <br>
<input type="radio" name="answer" id="ans3" value="3"> Jai Ho <br> 	
<div class="answer">You have either chosen choice 1 or choice 2 and you have chosen the Right Answer</div>
</body>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:birwin
ID: 33602579
Thank you kadaba.
That is exactly what I was looking for. Is there any way to have a different div open for one an two? I didn't think that would be possible until I saw your original code.
Of course you've earned the points, with a great answer!
0
 
LVL 6

Author Closing Comment

by:birwin
ID: 33602584
Excellent answer from a great expert.
Fast, reponsive and gave me exactly what I asked for.
Thank you so much.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33602593
Yes a slight variation in the above code will do it. Have two div s with different Ids and show them on click. see the code attached. I hope I was helpful :)

<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
			
	<script type="text/javascript">
		
	$(document).ready(function() {
		$("input[name = answer]").click(function(){
			$(".answer").hide();
			if($(this).val() != 3){
			
				$("#answer"+$(this).val()).show("slide", { direction: "up" }, 1000);
			}
		});
	
	});

	</script>
	<style type="text/css">
	.answer{
		background-color:green;
		color:white;
		font-weight:bold;
		display:none;
		width:400px;
		height:100px;
	}	
	</style>
</head>
<body>

<div>First line of program<div>
<input type="radio" name="answer" id="ans1" value="1"> Hello World <br>
<input type="radio" name="answer" id="ans2" value="2"> Hello <br>
<input type="radio" name="answer" id="ans3" value="3"> Jai Ho <br> 	
<div id="answer1" class="answer">You are seeing this because you have chosen option 1.</div>
<div id="answer2" class="answer">You are seeing this because you have chosen option 2.</div>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

636 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