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>

Answer 1

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.