Use image radio to control hidden elements

[thesquaremedia]

I was able to do this although i had to change line 173 to class-options-interface.php with this output .= '<img src="' . esc_url( $option ) . '" alt="' . $option .'" class="of-radio-img-img' . $selected .'" onclick="document.getElementById(\''. esc_attr($value['id'] .'_'. $key) .'\').checked=true;" rel="'.$key.'" />'; Basically i just added the key as a rel="" attribute. i add in the classes of the hidden elements the value of the option as a class along with the hidden class. My Custom JS is

var headerLayoutOptions = new Array;
    jQuery('#section-header_layout img').each(function() {
        headerLayoutOptions.push(jQuery(this).attr('rel'));
    });
jQuery('#section-header_layout img').click(function() {

            jQuery('.'+jQuery(this).attr('rel')).fadeIn(400);
            for(i=0; i<headerLayoutOptions.length; i++){
                if(jQuery(this).attr('rel') != headerLayoutOptions[i]){
                    jQuery('.'+headerLayoutOptions[i]).fadeOut(400);
                }
            }
    });
jQuery('.'+jQuery('#section-header_layout input:checked').val()).show();

So i was wondering if this was ok you could add the line officially.

[devinsays]

Basically just a way to reference the key. Data attribute could also work. Thanks for the suggestion, I'll look into it when I make the next round of updates.