javascript - Why jQuery toggle function changes the width of my div? -
i have button want use switching between 2 divs, hiding one, , showing another. first div shows alright, when switch happens, , second div shown, width minimized, , not same.
<button id="flipgraphs">change</button>
my divs following:
<div class="graph hidden"><%= line_chart @weekly_graph %></div> <div class="graph"><%= line_chart @daily_graph %></div>
this jquery code:
<script> $(document).ready(function(){ $('#flipgraphs').click(function(){ $('.graph').toggle(); }); }); </script>
how can eliminate problem, , make 2 graphs (divs) show normal width, , not affected toggle funcion?
any highly appreciated.
in css give fixed width. e.g:
div.graph { width: 500px;}
or inline style:
<div class="graph hidden" style="width: 500px;"><%= line_chart @weekly_graph %></div> <div class="graph" style="width: 500px;"><%= line_chart @daily_graph %></div>
find width suits best , doesn't alter width anymore.
Comments
Post a Comment