transform category drop-down to toggle using moovweb

Question

I want to add toggler to the following code:

<div class="z100" id="category-sidebar">
    <h3 class="header">
        <a class="header" href="/shop/us/en/#">
        <span>The Latest</span>
        </a>
    </h3>   
    <ul class="show-more limit-10" style="display: block;">
        <li class=" first">
            <a href="/shop/us/en/mens/new-arrivals"><span>New Arrivals</span></a>
        </li>
    ......
    </ul>
    <h3 class="header">
        <a class="header" href="/shop/us/en/#">
        <span>The Latest</span>
        </a>
    </h3>   
    <ul class="show-more limit-10" style="display: block;">
        <li class=" first">
            <a href="/shop/us/en/mens/new-arrivals"><span>New Arrivals</span></a>
        </li>
    ......
    </ul>
    ......
</div>

I tried

$("./ul"){
    attribute("data-ur-toggler-component","content")
    attribute("data-ur-state","disabled")
    wrap("div",data-ur-set: "toggler",data-ur-state: "disabled"){
        insert_top("div",class:"cat-header",data-ur-toggler-component:"button",data-ur-state:"disabled"){
            move_here("../h3/a","top") {
                name("div");
                attribute("href","")
            }
        }
    }
}

but was not able to move toggler header to right place.

It was not a revert but semi-automatic "improve" action. I do not know why most of your original improvements where lost, i will fix it now. — Oleg Estekhin, Jul 11 '14 at 06:31

score 1 · Accepted Answer · answered Dec 01 '14 at 10:28

html() {
    $('//div[@class="z100"]') {
        attribute('data-ur-set','toggler')
        attribute('style','border: 1px red so;id;')
        $('//h3[@class="header"]') {
            name('div')
            attribute('data-ur-toggler-component','button')
        }
        $('//ul[@class="show-more limit-10"]') {
            name('div')
            attribute('data-ur-toggler-component','content')
            $('.//li') {
                name('div')
            }
        }
    }
}

Also write following code in sass file

[data-ur-toggler-component="content"] {
  display: none;
  &[data-ur-state="enabled"] {
    display: block;
  }

And remove inline property display="block" from html Refer http://tester.tritium.io/f15079e92fb4b53232bf4a94cceb1787f8012a33

transform category drop-down to toggle using moovweb

1 Answers1