Use image radio to control hidden elements
Closed this issue · 1 comments
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.
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.