javascript - li 要素をクリックして別のコンテナに追加し、残りの li を固定する方法

Question

少し問題があります：

私はこのリストを持っています：

<ul id="nextlevel">
<li class="listadetalii"><a style="width:100%;color:red;font-weight:600;cursor:pointer" rel="03.Accessories" data-folder="01.Hi tech (028_003)" data-titlu="Hi tech" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Hi tech<p style="width:100%;color:#828282;font-size:70%" class="muted">Luni, 18 Mar 2013 16:07:14</p></a>

    <ul class="detalii-produs hide">
        <li class="togo">Image 1</li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="#" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Fișă produs</a>

        </li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="#" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Listă prețuri</a>

        </li>
    </ul>
</li>
<li class="listadetalii"><a style="width:100%;color:red;font-weight:600;cursor:pointer" rel="03.Accessories" data-folder="02.Net (028_002)" data-titlu="Net" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Net<p style="width:100%;color:#828282;font-size:70%" class="muted">Marti, 16 Apr 2013 09:53:43</p></a>

    <ul class="detalii-produs hide">
        <li class="togo">Image 2</li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Fișă produs</a>

        </li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Listă prețuri</a>

        </li>
    </ul>
</li>
<li class="listadetalii "><a style="width: 100%; color: red; font-weight: 600; cursor: pointer; outline: medium none;" rel="03.Accessories" data-folder="03.)" data-titlu="Cuiere" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Cuiere<p style="width:100%;color:#828282;font-size:70%" class="muted">Luni, 18 Mar 2013 10:53:47</p></a>

    <ul class="detalii-produs hide" style="display: none;">
        <li class="togo">Image 3</li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Fișă produs</a>

        </li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Listă prețuri</a>

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

このリストは折りたたまれています。「ハイテク」をクリックすると、次のリストが展開され、コンテンツが表示されます。私は、li 要素クラスのコンテンツを div alfa に移動し、li を非表示にし、残りの li-s をこのリストに残すようにしたいと考えています。

残りの要素 Net、Cuiere についても同じ動作です...

<div id="alfa">here must be Image (n)</div>

フィドルの詳細なコードhttp://jsfiddle.net/gxg1974/Jy3EK/

ヒントとガイダンスをありがとうございました。