2 jquery panels close one when other open

[Mike2098]

Hi I have 2 panels on my page and would like the open panel to close when the other is opened, so on page load both panels are closed when panel 1 is open panel 2 if open will close and vice versa if panel 2 is open then panel 1 would close

this is the js I have tried to add

    $(document).ready(function() {

        // default settings
        // $('.panel').slidePanel();

        // custom settings
        $('#panel1').slidePanel({

            triggerName: '#trigger1',
            position: 'fixed',
            triggerTopPos: '250px',
            panelTopPos: '330px',
            ajax: false,
            ajaxSource: 'SmartForm',
clickOutsideToClose: true
        });


        $('#panel2').slidePanel({

            triggerName: '#trigger2',
            position: 'fixed',
            triggerTopPos: '300px',
            panelTopPos: '330px',
            ajax: false,
            ajaxSource: 'ajax2.html',
clickOutsideToClose: true

        });

    });

and these are my panels

<a href="#" id="trigger1" class="trigger left">Get a<br />
    Quote</a>
<div id="panel1" class="panel left togglepanels">
    <iframe id="if" src="SmartForm/Default.aspx"  width="552" height="490"> 
    </iframe>
</div>
<a href="#" id="trigger2" class="trigger left togglepanels">Call Back</a>
<div id="panel2" class="panel1 left">
    <iframe id="ic" src="ContactForm/Default.aspx" width="330" height="410"> 
    </iframe>
</div>

any suggestions thanks

M

[AndrewGSW]

Which panel/jquery plug-in is this? There are several of these. Provide a link to the docs - they will normally detail the events/methods that you can tap into.

But if you don't want them to display initially then you can use css:

display: none; /* or */
visibility: hidden;