title: How to add bootstrap class active in codeigniter
body: <p>i want to know how to add class active in codeigniter when we separate the view into 3 file. such as : </p>
  
  <ul>
  <li>header.php  </li>
  <li>page1.php ... page10.php</li>
  <li>footer.php</li>
  </ul>
  
  <p>from this <a href="https://stackoverflow.com/questions/21037396/how-to-add-dynamic-active-class-on-selected-page">thread</a>, there's no way how to do it when separated the view. </p>
  
  <p>this my header look like:</p>
  
  <pre><code>&lt;body class="skin-red"&gt;
  &lt;div class="wrapper"&gt;
  &lt;header class="main-header"&gt;
  &lt;/header&gt;
  &lt;aside class="main-sidebar"&gt;
          &lt;!-- sidebar: style can be found in sidebar.less --&gt;
          &lt;section class="sidebar"&gt;
            &lt;!-- Sidebar user panel --&gt;
            &lt;div class="user-panel"&gt;
              &lt;div class="pull-left image"&gt;
                &lt;img src="&lt;?php echo base_url();?&gt;assets/dist/img/admin.png" class="img-circle" alt="User Image" /&gt;
              &lt;/div&gt;
              &lt;div class="pull-left info"&gt;
                &lt;p&gt;Username&lt;/p&gt;
                &lt;small&gt;Privilage&lt;/small&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- search form --&gt;
            &lt;!-- /.search form --&gt;
            &lt;!-- sidebar menu: : style can be found in sidebar.less --&gt;
            &lt;ul class="sidebar-menu" id="sidebar"&gt;
              &lt;li class="header"&gt;MAIN NAVIGATION&lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-users"&gt;&lt;/i&gt; &lt;span&gt;Users&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;?php echo base_url(); ?&gt;user_man"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;User List&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-hospital-o"&gt;&lt;/i&gt; &lt;span&gt;Provider&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;?php echo base_url();?&gt;provider"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Provider List&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-book"&gt;&lt;/i&gt; &lt;span&gt;Product Info&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;?php echo base_url(); ?&gt;productinfo"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;List Product Info&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-book"&gt;&lt;/i&gt; &lt;span&gt;Procedure&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;?php echo base_url(); ?&gt;procedure"&gt;&lt;i class="fa fa-headphones"&gt;&lt;/i&gt;Procedure List&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Link Customer Portal&lt;/a&gt;&lt;/li&gt; --&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-film"&gt;&lt;/i&gt; &lt;span&gt;Video Upload&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Video Data&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Prosedur&lt;/a&gt;&lt;/li&gt; --&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Informasi NAB&lt;/a&gt;&lt;/li&gt; --&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Demo(Video)&lt;/a&gt;&lt;/li&gt; --&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; &lt;span&gt;Slide Show Wallpaper&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Slide Show Data&lt;/a&gt;&lt;/li&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Prosedur&lt;/a&gt;&lt;/li&gt; --&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Informasi NAB&lt;/a&gt;&lt;/li&gt; --&gt;
                  &lt;!-- &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Demo(Video)&lt;/a&gt;&lt;/li&gt; --&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="treeview"&gt;
                &lt;a href="#"&gt;
                  &lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; &lt;span&gt;Examples&lt;/span&gt;
                  &lt;i class="fa fa-angle-left pull-right"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="treeview-menu"&gt;
                  &lt;li&gt;&lt;a href="&lt;?php echo base_url();?&gt;user/login"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;Login&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/section&gt;
          &lt;!-- /.sidebar --&gt;
        &lt;/aside&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>to access the content, this is the how i do:</p>
  
  <pre><code>&lt;section class="content"&gt;
  .....
  &lt;/section&gt;
  </code></pre>
  
  <p>and this my footer view:</p>
  
  <pre><code>&lt;/div&gt;
  &lt;!-- /.content-wrapper --&gt;
  &lt;footer class="main-footer"&gt;
    &lt;div class="pull-right hidden-xs"&gt;
      &lt;b&gt;Version&lt;/b&gt; 2.0
    &lt;/div&gt;
    &lt;strong&gt;Copyright &amp;copy; 2014-2015&lt;/strong&gt; All rights reserved.
  &lt;/footer&gt;
  
  
  &lt;/div&gt;&lt;!-- ./wrapper --&gt;
  
  &lt;script&gt;&lt;/script&gt;
  &lt;script&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i want to made,when user click the treeview submenu it will become active,
  right know when i click the treeview submenu. it will reload not become active.
  in sample i downloaded AdminLTE active class define in each submenu page, such as menu - <code>&lt;li class="active"&gt;submenu&lt;/li&gt;</code></p>
  
  <p>regards,
  bobby</p>
  
  <p>cmiiw</p>
  
  <p>================================================</p>
  
  <p>i found the js code, it is in. app.js. </p>
  
  <pre><code>$.AdminLTE.tree = function (menu) {
    var _this = this;
  
    $("li a", $(menu)).click(function (e) {
      //Get the clicked link and the next element
      var $this = $(this);
      var checkElement = $this.next();
  
      //Check if the next element is a menu and is visible
      if ((checkElement.is('.treeview-menu')) &amp;&amp; (checkElement.is(':visible'))) {
        //Close the menu
        checkElement.slideUp('normal', function () {
          checkElement.removeClass('menu-open');
          //Fix the layout in case the sidebar stretches over the height of the window
          //_this.layout.fix();
        });
        checkElement.parent("li").removeClass("active");
      }
      //If the menu is not visible
      else if ((checkElement.is('.treeview-menu')) &amp;&amp; (!checkElement.is(':visible'))) {
        //Get the parent menu
        var parent = $this.parents('ul').first();
        //Close all open menus within the parent
        var ul = parent.find('ul:visible').slideUp('normal');
        //Remove the menu-open class from the parent
        ul.removeClass('menu-open');
        //Get the parent li
        var parent_li = $this.parent("li");
  
        //Open the target menu and add the menu-open class
        checkElement.slideDown('normal', function () {
          //Add the class active to the parent li
          checkElement.addClass('menu-open');
          parent.find('li.act').addClass('active');
          // parent_li.addClass('active');
          //Fix the layout in case the sidebar stretches over the height of the window
          _this.layout.fix();
        });
      }
      //if this isn't a link, prevent the page from being redirected
      if (checkElement.is('.treeview-menu')) {
        e.preventDefault();
      }
    });
  };
  </code></pre>
  
  <p>here's the first schema of the layout.
  in page.A <code>&lt;li&gt;</code> was active so page.B, when i click one of the it become active.
  after slicing the page into codeigniter way, i separate into 3: header,content(body),and footer. 
  i remove all the class in tag <code>&lt;li&gt;</code>..</p>
  
  <p>i try to modify like thie below:</p>
  
  <pre><code>checkElement.addClass('menu-open');
  parent.find('li').on('click', function(){
    $(this).addClass('active');
  });
  </code></pre>
  
  <p>it wont work,
  wonder if u guys had a ways.</p>
  
  <p>sorry for my bad english :-D</p>