javascript - Load a div on a click -

i have chart 2 donut charts. 1 bigger , 1 smaller. smaller chart placed inside bigger chart. wondering if load bigger chart via click of button. attempted ran in problems because smaller chart's position relative bigger chart's position. wondering if there css trick can this? using angular js. fiddle

this code chart

var chart = c3.generate({     bindto: "#chart",     data: {         columns: [             ['a', 30],             ['b', 50],         ],         type : 'donut'      },        legend: {         show: false     },          });   var chart = c3.generate({     bindto: "#chart1",        size: {         height: 200,         width: 450     },     data: {         columns: [             ['c', 50],             ['d', 50],         ],         type : 'donut'      },       legend: {         show: false     },   }); 

why don't assign opacity of 0 larger graph on load , use javascript assign opacity of 1 on click. if feeling adventurous can throw in transitions.

.fadein {    opacity: 1 !important;    transition: opacity .25s ease-in-out;    -moz-transition: opacity .25s ease-in-out;    -webkit-transition: opacity .25s ease-in-out;     -webkit-animation-name: spinner;     -webkit-animation-duration: 1s;     -webkit-animation-iteration-count: once;     -webkit-animation-timing-function: linear;     -moz-animation-name: spinner;     -moz-animation-duration: 1s;     -moz-animation-iteration-count: once;     -moz-animation-timing-function: linear;     -ms-animation-name: spinner;     -ms-animation-duration: 1s;     -ms-animation-iteration-count: once;     -ms-animation-timing-function: linear; } 

here example of talking : jsfiddle

update: have appended code can hide , show on clicking same button: jsfiddle