views:

24

answers:

1

I'm looking for an easy solution to show/hide/slide (whichever is easiest) an external div elsewhere on my page at the same time my corresponding coda panel slides into view. So essentially I am trying to slide a panel into view while also sliding another panel further down on the page that is NOT in the same container.

I'm using this script which piggybacks the coda slider: http://scriptplayground.com/tutorials/js/Customizable-and-Flexible-jQuery-Carousel-Rotator/

I've found a solution that works on click to show/hide external divs, but my problem occurs when the script automatically chooses the next tab - my on click event for the external divs is now obsolete.

A: 

Your selectors

<ul class="toggle_links">
   <li><a href="#" rel="tab1">Open Close tab1</li>
   <li><a href="#" rel="tab2">Open Close tab2</li>
   <li><a href="#" rel="tab3">Open Close tab3</li>
   <li><a href="#" rel="tab4">Open Close tab4</li>
</ul>

Your Divs

<div class="tab_containers">
    <div id="tab1">This is tab 1</div>
</div>

Javascript:

$(document).ready(function(){
    $('.tab_containers div').hide(); //Hide all the containers

    //Bind the links
    $('.toggle_links li a').click(function(){
        var tabToOpen = $(this).attr('rel');
        $(this).addClass('active');

        if($('#' + tabToOpen).css('display') != '')
        {
            //Its already open.
            return;
        }

        $('.toggle_links div').fadeout(); //hide them all

        //Open it up!
        $('#' . tabToOpen).slidein();

        //Return false to prevent the links from there default method.
        return false;
    });
});

is this what you mean ?

RobertPitt
Not quite - I am talking about having another div completely seperate of my coda slider panel area to slide in/fade in/etc once my coda panel is called. It would just be an external div that goes along for the ride, both via click and via the auto show function I am using based on the url I supplied.
ShawnB