Unable to toggle on hover in to display another list of items

Question

I am trying to display more details using toggle. The code snip is as below: Style:

<style>
    .flyout {
        position:relative;
        width:100px;
        height:150px;
        background:lightblue;
        overflow: hidden;
        z-index:10000;
    }
    .hidden{
        display:none;
    }
</style>

Script to change the class on hover:

<script>
    $j = jQuery.noConflict();

    $j(document).ready(function() {
        $j("#menu").hover(function() {
            $j('.hidden').toggleClass('flyout');
        });
    });
</script>

This is the section hidden by default:

<ul class="hidden">
    <apex:repeat value="{!Leads}" var="m">
        <li class="leads" >{!m.description__c}<div></div>{!m.assigneddate__c}<div></div>{!m.details__c}</li>        
    </apex:repeat>
</ul> 

This is the section which is displayed by default and on hover shoes above details:

<ul class="sideBarList" id="menu">
    <apex:repeat value="{!Leads}" var="m" id="menu">
        <li class="leads">{!m.name}<div></div>{!m.CreatedDate}<div></div>{!m.object__c}</li>        
    </apex:repeat>
</ul>

Answer 1

Try it this way

              <script>
                $j = jQuery.noConflict();
                $j(document).ready(function(){
                $j("#menu").hover(function(){
                $j('#menuLink').toggleClass('hidden');
             });
                    });
             </script>

Modify this section added id="menuLink"

<ul id="menuLink" class="hidden">
         <apex:repeat value="{!Leads}" var="m">
             <li class="leads" >{!m.description__c}<div></div>{!m.assigneddate__c}<div></div>{!m.details__c}</li>        
         </apex:repeat>
      </ul>