Click here to Skip to main content
14,695,609 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi!
i have created accordian style view of moodle2.0 course category list using jquery but the problem is that i want to have the plus and minus sign indented.plus and minus signs are images used as background images using css .like this
-level0
   +level1 
   +level1
   -level1
      -level2
         -level3
            +level4
-level0
  -level2
    +level3

+level0

but it apperars like this

-level0
+   level1 
+   level1
-   level1
-       level2
-         level3
-            level4

-level0
-  level1
+    level2

+level0

please help me here is the html code
<div class="categorylist level0">
<div class="category">
<a href="http://localhost/moodle/course/category.php?id=15">seecs</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level1">
<div class="category">
<div class="indentation level0">
<a href="http://localhost/moodle/course/category.php?id=24">level1</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level1">
<div class="category">
<div class="indentation level0">
<a href="http://localhost/moodle/course/category.php?id=23">level11</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level1">
<div class="category">
<div class="indentation level0">
<a href="http://localhost/moodle/course/category.php?id=16">level1</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level2">
<div class="category">
<div class="indentation level1">
<div class="indentation level0">
<a href="http://localhost/moodle/course/category.php?id=17">level2</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level3">
<div class="category">
<div class="indentation level2">
<div class="indentation level1">
<div class="indentation level0">
<a href="http://localhost/moodle/course/category.php?id=18">level3</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div class="categorylist level4">
<div class="category">
<div class="indentation level3">
<div class="indentation level2">
<div class="indentation level1">
<div class="indentation level0">
<a href="http://localhost/moodle/course/category.php?id=19">level4</a>
<span class="numberofcourse" title="Number of courses"> (0)</span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>

where as the indentation css class defines padding-left:15px

please help me how to indent both the plus and minus..
Posted
Updated 30-Sep-11 23:45pm
v2

1 solution

Seems like you are looking for something like this:http://jquery.bassistance.de/treeview/demo/[^]

You can download it from this page:
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/[^]

Best regards
Espen Harlinn
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900