JQUERY Accordion Menu with tabs opening

saranya_gansai · May 27, 2014

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.

home.php

    <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="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="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 > 0 ) {
                       foreach ($reports as $ds)
                       {
                          echo '<div style="float:left;margin:5px 14px;width:180px;">
                                   <div style="float:left;"><img src="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="images/edit.gif"/></a></div>
                                   <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div>
                               </div>';
                       }
                   }
                   else
                   echo 'No Datasources';
                   echo '</div>

                   <div class="wings">
                     <div style="float:left;"><img src="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="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 > 0 ) {
                       foreach ($roles as $ds)
                       {
                          echo '<div style="float:left;margin:5px 14px;width:180px;">
                                   <div style="float:left;"><img src="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="images/edit.gif"/></a></div>
                                   <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div>
                               </div>';
                       }
                   }
                   else
                   echo 'No Datasources';
                   echo '</div>';

            echo '</div> ';

            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>';
        ?>
       </body>
    </html>

JS Fiddle : http://jsfiddle.net/gansai/s9NvX/1/

Sign In

JQUERY Accordion Menu with tabs opening

Recommended Posts

saranya_gansai

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information