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?
 
Ryan ChongCommented:
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
 
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 ChongCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.