width should be distributed equally

if button 1 is clicked  one div will be shown if 2 is clicked 2 divs will be shown if 3 is clicked 3 divs will be shown,  so if button 1 is clicked the div should take full width  if button 2 is clicked it shows 2 divs  and it should share the full width. and if the button 3 is clicked it should share the width according.  finally how to share the width automatically for divs.
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript"></script>
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	
	<style type="text/css">
	#one , #two , #three{border:1px solid #cccccc;
		width: 32%;
		height: 500px;
		display: inline-block;
		
	
	}
	
	</style>
	<script>
$(document).ready(function(){
$(".button1").click(function(){
$("#one").toggle();

}); 
$(".button2").click(function(){
$("#two , #three").toggle(); 
});
$(".button3").click(function(){
$("#one , #two , #three").toggle(); 
});
}); 
	</script>
</head>
<body>

	<div class="container" style="border: 1px solid red;width: 100%; height: 100%;">
		<div class="contan" id="one" style="display: none;">

			1st container
			
		</div>
		<div  class="contan" id="two" style="display: none;">

			2nd container 
			
		</div>
		<div  class="contan" id="three" style="display: none;">

			3rd container
			
		</div>
		

		


		
	</div>
	<input type="button" class="button1" name="" value="button1" />
	<input type="button" class="button2" name="" value="button2" />
	<input type="button" class="button3" name="" value="button3" />


</body>
</html>

Open in new window

kumar naikGraphic DesignerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
try look for the width property, like:

<script>
      $(document).ready(function(){
      $(".button1").click(function(){
      $("#one").toggle();
      $("#one").width("96%");
      });
      $(".button2").click(function(){
      $("#two , #three").toggle();
      $("#two , #three").width("48%");
      });
      $(".button3").click(function(){
      $("#one , #two , #three").toggle();
      $("#one , #two , #three").width("32%");
      });
      });
    </script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kumar naikGraphic DesignerAuthor Commented:
this answer is fine. one more small doubt  i want the divs to resize the width automatically  but not by giving width. please suggest me.
0
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
by not giving the criteria (width with a value), how are we supposed to determine the width for resize?
0
kumar naikGraphic DesignerAuthor Commented:
thanks for your support
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.