Solved

Accordian div expansion when a radio button is clicked

Posted on 2010-09-03
6
306 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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…

757 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