Question

I’ve tried for a few hours to get a solution for the following problem. I did it with a rather complex

• A list with a radio-box selection, with a description of the selected radiobox below it;
• On mouse hover over each item, the description in the same position appears (all other descriptions disappear);
• When the mouse does not hover on an item, the description matching the checked radiobox will appear (all other descriptions disappear);

I fully admit that my jQuery knowledge is at a minimum level, mostly because I never need to use it myself. Spending a few hours on Google and some puzzling got me everything but a working solution for the entire problem. I had a working JS script for it a while ago with just too much code, looking at where I am now it looks like Jquery can give me a much shorter and cleaner code.

Right now I got the following HTML:

<style type="text/css">
   .options .active {font-weight: bold;}
   .descriptions span {display: none;}
   .descriptions span.active {display: block;}​
</style>

<div class="options">
   <label><input name="permForumcon" type="radio" value="10" /> option1</label>
   <label><input name="permForumcon" type="radio" value="50" />option2</label>
   <label><input name="permForumcon" type="radio" value="70" /> option3</label>
</div>

<div class="descriptions">
   <span>description1</span>
   <span>description2</span>
   <span>description3</span>
</div>


$(document).ready(function() {
options = $('.options > label');
descriptions = $('.descriptions > span');
options .each(function(idx) {$(this).data('slide', descriptions.eq(idx));}).hover(
    function() {
        options .removeClass('active');
        descriptions.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
     }, function() {
        switches.removeClass('active');
        slides.removeClass('active');
         $('input[name=permForumcon]:checked + label').addClass('active') //this is where is already doesnt seem to work
        }
 );});

on Jsfiddlle: http://jsfiddle.net/mqcP9/8/

The problem that remains is, it(the added active class on both the label in options and the span in descriptions) doesn’t change back to the selected radiobox. I tried several things which are visible commented when looking at the jsfiddle sandbox. Anyone who could help me on the last part?

Answer 1

Have this as your “off-hover” function:

function() {
    options.removeClass('active');
    descriptions.removeClass('active');
    $('label:has(input:checked)').addClass('active');
    $('label:has(input:checked)').data('slide').addClass('active');
}

Your selector for the checked label was off, that was really the root of it.