how do I change another div visibility on accordion change event

I am using http://docs.jquery.com/UI/Accordion#overview

It is a pretty straight forward accordion that does the job. 开发者_StackOverflowWhat I have is a banner space on my site. I have an accordion on the left side of the banner, and I want to make the right side show additional info for the open accordion tab.

So on page open, the accordion defaults to the first tab, which would have an additional div open on the right side.

When the user clicks the second tab in the accordion, that tab slides open, and the right side div would change to the related div for the second accordion tab and so on.

Bind to the change event by type: accordionchange.

$( ".selector" ).bind( "accordionchange", function(event, ui) {
  //use this variables to decide what new content to put in your right hand side
  ui.newHeader // jQuery object, activated header

});

http://docs.jquery.com/UI/Accordion#event-change

You would probably need to modify the onclick handler to find the element being clicked on (through it's ID most likely) and then call a function so that ID can be used in another function to determine what to show on te right side of the page). Currently the accordian uses this which is a direct reference to the element, so you would want to consider passing that, or just the id from it.

jQuery(document).ready(function(){
  myFunction = function(ele){
    //my custom show/hide stuff here
  };

  $('.accordion .head').click(function() {
    $(this).next().toggle();
    myFunction($(this));
    return false;
  }).next().hide();

});