Creating a CSS tree with divs

Question

I'm trying to create this effect: http://www.thecssninja.com/demo/css_tree/ the problem I'm having is that the code I'm working with only outputs with divs. So no ol/ul. I'm not quiet sure how to do this. Here's is a snippet of the code I'm working with:

<div class="jr_fieldDiv jr_exteriortype" style="">
    <label class="jrLabel">Exterior type</label>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_brick" data-click2add="0" value="brick">&nbsp;Brick</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_cement-concrete" data-click2add="0" value="cement-concrete">&nbsp;Cement/Concrete</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_composition" data-click2add="0" value="composition">&nbsp;Composition</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_metal" data-click2add="0" value="metal">&nbsp;Metal</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_shingle" data-click2add="0" value="shingle">&nbsp;Shingle</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_stone" data-click2add="0" value="stone">&nbsp;Stone</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_stucco" data-click2add="0" value="stucco">&nbsp;Stucco</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_vinyl" data-click2add="0" value="vinyl">&nbsp;Vinyl</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_wood" data-click2add="0" value="wood">&nbsp;Wood</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_wood-products" data-click2add="0" value="wood-products">&nbsp;Wood Products</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_other" data-click2add="0" value="other">&nbsp;Other</div>
    <div class="clr"></div>
</div>

i am confused your code only allow divs? Do you load the content via ajax to a div with specific name? If yes then load the ol/ul content via ajax. — SG 86
– SG 86, Commented Mar 26, 2012 at 8:52
It's a component with Joomla so I'm sure it's possible to load the ol/ul just not entirely sure where to edit to make this possible. I think I'll search for the code. — VanLuda
– VanLuda, Commented Mar 26, 2012 at 16:21

Christoph · Accepted Answer · 2012-03-26 09:00:32Z

4

Although a list would be better, it is possible without problems to do this with divs too. It doesn't matter it the structure is

<ul>
   <li></li>
   <li>
      <ul>
         <li></li>
      </ul>
   </li>
</ul>

or

<div class="parent">
   <div class="child"></div>
   <div class="child parent">
       <div class="child"></div>
   </div>
</div>

With some help of classes, you can easily style as if you had an ol/ul list structure.

answered Mar 26, 2012 at 9:00

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

VanLuda Over a year ago

Thank you Christoph! I do appreciate your help.

Christoph Over a year ago

@CarlV You're welcome. If it did help you solve the problem, you can accept the answer by clicking the green arrow on the left. This marks the question as solved to the other users.

VanLuda Over a year ago

I hate to be a neusense I'm trying to figure out how to CSS this code. I've looked at numerous sites and no luck. I only need one parent group and one child group

VanLuda Over a year ago

Umm, if I can find it then as much as possible. If I can't then not at all.

Bobby Jack · Accepted Answer · 2012-03-27 13:20:30Z

0

You should override the template that the component is using.

answered Mar 27, 2012 at 13:20

Bobby Jack

16.1k15 gold badges70 silver badges99 bronze badges

Collectives™ on Stack Overflow

Creating a CSS tree with divs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related