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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post JQUERY Accordion Menu with tabs opening

    The code is for generated a home page with two div's: 'left_menu' and 'right_menu', where I want to navigate with the links from left_menu should display the content on the right_menu.

    I have two links (reports and roles) on the left_menu and two tabs (tab1 and tab2) on the right_menu.

    1. When I click on reports, it should open the tab1 and clicking on
    users should open the tab2.
    2. When I launch home.php, the first item(reports) should be opened by
    default and the tab1 accordingly.

    Here is the my code I tried, when I click the roles on left_menu, it is opening the default one i.e. tab1 and the left_menu isn't opened by default. Appreciate your help.

    home.php

    PHP Code:
    <html lang="<?php echo _SITE_LANGUAGE ?>">
           <head>   
            <script src="../js/jqueryv1.10.2.js"></script>
            <script type="text/javascript">
        
               //accordion left menu
               $ (document).ready(function()
               {
                   $ (".wings").click(function(event)
                  {
                      $(".box").slideUp("slow");
                     if ($(this).next().is(":hidden") == true)
                     {
                        $(this).next().slideDown("slow");
                     }
                  });
                  //(".box").hide("slow");
               });
        
               //Tab (rightbox)
               $(document).ready(function() 
               {    
                 $('#tabs li a:not(:first)').addClass('inactive');
                 $('.contain').hide();
                 $('.contain:first').show();
              
                 $('#tabs li a').click(function()
                 {
                    var t = $(this).attr('id');
                    if($(this).hasClass('inactive'))
                    { //this is the start of our condition 
                      $('#tabs li a').addClass('inactive');         
                      $(this).removeClass('inactive');
                      $('.contain').hide();
                      $('#'+ t + 'C').fadeIn('slow');
                    }
                 });
               });
        
              </script>
            <style>
              .wings { width:200px; float:left; padding:7px 11px; }
              .box { width:195px; float:left; display:none; margin:0px 20px; }
            </style>
           </head>
        
           <body>
             <?php
                
    echo '<div class="left_menu">
        
                       <div class="wings">
                         <div style="float:left;"><img src="http://www.codingforums.com/images/right_arrow.gif"/></div>
                        <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Reports</a></div>
                        <div style="float:right;"><img src="http://www.codingforums.com/images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div>
                       </div>
        
                       <div class="box">'
    ;
                        
    $reports $reports->get_report();
                        
    $reports_count count($reports);
                        if (
    $reports_count ) {
                           foreach (
    $reports as $ds)
                           {
                              echo 
    '<div style="float:left;margin:5px 14px;width:180px;">
                                       <div style="float:left;"><img src="http://www.codingforums.com/images/right_arrow.png"></div>
                                       <div style="float:left;padding:0px 6px;">'
    .$ds['dsource_name'].'</img></div>
                                       <div style="float:left;"><a href="edit_dsource.php?id='
    .$ds['id'].'"><img src="http://www.codingforums.com/images/edit.gif"/></a></div>
                                       <div style="float:left;padding:1px 2px;"><img src="http://www.codingforums.com/images/not-available.png"/></div>                              
                                     </div>'
    ;
                           }
                        }
                        else
                        echo 
    'No Datasources';    
                       echo 
    '</div>
        
                       <div class="wings">
                         <div style="float:left;"><img src="http://www.codingforums.com/images/right_arrow.gif"/></div>
                        <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Roles</a></div>
                        <div style="float:right;"><img src="http://www.codingforums.com/images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div>
                       </div>
        
                       <div class="box">'
    ;
                        
    $roles $roles->get_report();
                        
    $roles_count count($roles);
                        if (
    $roles_count ) {
                           foreach (
    $roles as $ds)
                           {
                              echo 
    '<div style="float:left;margin:5px 14px;width:180px;">
                                       <div style="float:left;"><img src="http://www.codingforums.com/images/right_arrow.png"></div>
                                       <div style="float:left;padding:0px 6px;">'
    .$ds['dsource_name'].'</img></div>
                                       <div style="float:left;"><a href="edit_dsource.php?id='
    .$ds['id'].'"><img src="http://www.codingforums.com/images/edit.gif"/></a></div>
                                       <div style="float:left;padding:1px 2px;"><img src="http://www.codingforums.com/images/not-available.png"/></div>                              
                                     </div>'
    ;
                           }
                        }
                        else
                        echo 
    'No Datasources';    
                       echo 
    '</div>';
                   
                echo 
    '</div> <!--left_menu-->';  
        
                echo 
    '<div class="right_menu">
                       <ul id="tabs">
                          <li><a id="tab1">Configuration</a></li>      
                          <li><a id="tab2">Report Viewer</a></li>
                       </ul>
        
                       <div class="container" id="tab1C">
                           <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br>
                             ( Report Tab content )                  
                          </div>
                       </div>
                       
                       <div class="container" id="tab2C">
                           <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br>
                             ( Report Tab content )                  
                          </div>
                       </div>'
    ;                  
                echo 
    '</div><!--right_menu-->';
            
    ?>
           </body>
        </html>

    JS Fiddle : http://jsfiddle.net/gansai/s9NvX/1/
    Last edited by VIPStephan; 05-27-2014 at 07:17 PM. Reason: added code BB tags


 

Tags for this Thread

Posting Permissions

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