Solved

Accordian div expansion when a radio button is clicked

Posted on 2010-09-03
6
312 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
  • 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now