Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 jquery panels close one when other open

    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

    Code:
        $(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

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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:

    Code:
    display: none; /* or */
    visibility: hidden;
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •