Question

My main problem is that I want to create an accordion based website in jquery,when the accordion button is clicked it opens the content for it.

But I cant figure out how can i implement,that when is create a top menu for it it also controls the sliding of it.

So for example: on the main content,I click on the work accordion button– it slides down and shows the attached content for work… but i dont know how to link the top menu’s “work” button to slide down that same content.

html:

<div id="wrapper">
    <div class="accordionButton"><img src="work.png" width="666" height="84"></div>
    <div class="accordionContent"><img src="7.jpg" width="900"></div>

jquery:

$(document).ready(function() {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').removeClass('on');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.accordionContent').slideUp('normal');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
     } 

 });


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.accordionButton').mouseover(function() {
    $(this).addClass('over');

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
    $(this).removeClass('over');                                        
});


$('.accordionContent').hide();

css:

#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.accordionButton {  
    width: 900px;
    float: left;
    _float: none;



border-bottom: 1px solid #FFFFFF;
cursor: pointer;
}

.accordionContent { 
    width: 1000px;
    float: left;
    padding:20px;
    _float: none; 
    background: #fff;
    }

Answer 1

You can also use the Jquery trigger functionality.Which simulates a given event on selectors you pass to it.

Lets say you have five accordion divs,resultingly you will have 5 menu elements.

Just wire you menu elements to do something like follows:

$("#menuitem1").click(function(e){
    $("#accordionLi1").trigger("click");
});

Ideal you should just loop thru all the available elements and attach triggers to them.
something like:

for(var i=0;i<n;i++)
{
    $("#menuitem"+i).click(function(e){
        $("#accordionLi"+i).trigger("click");
    });
}