Wednesday, December 14, 2011

Create expand collapse tree drupal 7

mymodule
|- mymodule.info
|- mymodule.module
|- mymodule.js
|- mymodule.css
|- images
 |- file.gif
 |- minus.gif
 |- plus.gif

mymodule.info:
name = My Module
description = My Description
core = 7.x

mymodule.module:
<?php

function mymodule_menu(){
  $items = array();

  $items['mymodule_page'] = array(
    'title' => 'demo',
    'type' => MENU_CALLBACK,
    'page callback' => 'mymodule_page',
    'access arguments' => array('access content')
  );

  return $items;
}

function mymodule_page() {

  drupal_add_library('system', 'drupal.collapse');
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js', 'file');
  drupal_add_css(drupal_get_path('module', 'mymodule') . '/mymodule.css','file');

  $title = 'My Title';
  $type = 'ul';
  $attributes = array(
    'id' => 'my-custom-listing',
    'class' => 'custom-class another-custom-class', // a string or indexed (string) array with the classes for the list tag
  );

  $items[] = array(
    'data' => '1',
    'class' => array('dummy'=>'category'),
    'children' => array(
         array(
          'data'=> '1.1',
          'class' =>array('dummy'=> 'deepest_item')),
        array(
          'data'=> '1.2',
          'class' =>array('dummy'=> 'deepest_item')),
        array(
          'data'=> '1.3',
          'class' => array('dummy'=> 'category'),
         'children'=> array(
             array('data'=>'1.3.1','class' => array('dummy'=>'deepest_item')),
             array('data'=>'1.3.2','class' => array('dummy'=>'deepest_item'))
          )
        )
    )
  );

  $output =  array(
    'first_para' => array(
      '#type' => 'markup',
      '#markup' => '<p>A paragraph about some stuff...</p>',
    ),
    'second_para' => array(
      '#items' => $items,
      '#title' => $title,
      '#type' => $type,
      '#attributes' => $attributes,
      '#theme' => 'item_list',
    ),
  );
  return $output;

  //return theme_item_list(array('items' => $items, 'title' => $title, 'type' => $type, 'attributes' => $attributes)); }

mymodule.js:
(function ($) {
  $(document).ready(function() {
    $('li.category').addClass('expandable_icon');
    $('li.category').children().addClass('deepest_item');
    $('li.category').children().hide();
    $('li.category').each(
      function(column) {
       $(this).click(function(event){
          if (this == event.target) {
            if($(this).is('.expandable_icon')) {
             $(this).children().show();
             $(this).removeClass('expandable_icon');
             $(this).addClass('collapsible_icon');
            }else{
             $(this).children().hide();
             $(this).removeClass('collapsible_icon');
             $(this).addClass('expandable_icon');
            }
          }
        });
      });
    }
  );
})(jQuery);

mymodule.css:
.expandable_icon{
 list-style-image:url("./images/plus.gif");
 cursor:pointer;
}

.collapsible_icon{
 list-style-image:url("./images/minus.gif");
 cursor:pointer;
}

.deepest_item{
 list-style-image:url("./images/file.gif");
 cursor:pointer;
}

drush en -y mymodule

visit http://YOURSITE/mymodule_page

thanks
http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery
http://api.drupal.org/api/drupal/includes--theme.inc/function/theme_item_list/7

3 comments:

  1. So far one of the greatest post ever
    Got it in a while.
    Thank you

    ReplyDelete
  2. Brilliant code. My users will love me because of you. Collect your karma bonus immediately!

    ReplyDelete