Mootools Highcharts radio button toggle between ch

Question

I've created a Highcharts implementation with a working jQuery-based radio button toggle "view select" between two charts: http://jsfiddle.net/6sAYF/ (it's in the lower-right)

here is the working jQuery function and corresponding html:

$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#0829-"+$(this).val()).fadeIn('fast');
    });
 });

<div id="0829-1" class="toHide" ></div>
<div id="0829-2" class="toHide" style="display:none;width:780px;"></div>

<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>&#37;</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />2</label>

Where to start? Should I rewrite the function for Mootools? Use jQuery noconflict() mode and the original function?

My mootools version is here without toggle function: http://jsfiddle.net/JhWe6/

Many thanks to anyone with insight.

Answer 1

<div id="graphwrap" style="height: 410px;">

<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>

<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="1" style="cursor:pointer;" checked/>&#37;</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" style="cursor:pointer;" />2</label>
</div>

</div>


window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
    $$('.toHide').setStyle('top', '-9999em');
    $$('.toHide').setStyle('opacity', '0');
    $("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});  
var chart1 = new Highcharts.Chart({
    chart: {
         renderTo: 'divID-1',
         height: 400, //works with the margin-bottom style
         ...

var chart2 = new Highcharts.Chart({
    chart: {
         renderTo: 'divID-2',
         height: 400,
         ...

http://jsfiddle.net/JhWe6/10/

Per Highcharts support, the correct way for Highcharts to be hidden on a page is to use CSS style="position:relative; top:-9999em;" and update the CSS "top" in my case MooTools' setStyle('top', '0'). I also added $$('.toHide').setStyle('opacity', '0'); which makes the fade in nice.

You'll also notice that I needed to margin-bottom:-400px my first div. Is that the correct way to compensate for the now-rendered-as-blank bottom div?