Show Hide panel

by aslancods

HTML

<script src="https://dl.dropboxusercontent.com/s/y7n2nut2vaeclp2/goodtree.plugin.js"></script>
<script src="https://dl.dropboxusercontent.com/s/m0qva8v4q3fe9oi/contract_icon.png"></script>
<script src="https://dl.dropboxusercontent.com/s/jn0fr2oajl4agjh/expand_icon.png"></script>
<div class="panel">
    <div class="tree">

        <ul id="menuId" class="menuClick">
            <li><a>First Level</a> 
                    
            </li>
        </ul>
    </div>

</div>


<a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>
<button id="add"> add</button>
<ul id="ultest">
    
    
</ul>
    <div id="htmlme"></div>

CSS

.panel {
	width:300px;
	float:left;
	height:550px;
	background:#d9dada;
	position:relative;
	left:-300px;

}
.slider-arrow {
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
}




body, a {
    color: #3B4C56;
    font-family: sans-serif;
    font-size: 14px;
    text-decoration: none;
}


a{
	cursor:pointer;
}
.tree ul {
    list-style: none outside none;
}
.tree li a {
    line-height: 25px;
}
.tree > ul > li > a {
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}
.tree li.parent > a {
    padding: 0 0 0 28px;
}
.tree li.parent > a:before {
    background-image: url("https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png");
    background-position: 25px center;
     content: ""; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}
.tree ul li.active > a:before {
    background-position: 0 center;
}
.tree ul li ul {
    border-left: 1px solid #D9DADB;
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}
.tree ul li ul li {
    position: relative;
}
.tree ul li ul li:before {
    border-bottom: 1px dashed #E2E2E3;
    content: "";
    left: -20px;
    position: absolute;
    top: 12px;
    width: 15px;
}






#ultest {
    list-style-type:none!important;
    margin:0!important;
    padding:0!important;
}
#ultest li {
    padding:10px!important;
    margin:5px!important;
    border:1px solid #C8DAE6!important;
    background:#EDF2F6!important;
    border-radius:10px!important;
}
#ultest li a {
    line-height:2.2em!important;
    padding:0 0.75em!important;
    text-decoration:none!important;
    display:block!important;
    border:1px solid #3C7DA9!important;
    border-radius:8px!important;
    background: #4283AD...

JavaScript

$(function () {

    $('.slider-arrow').click(function () {
        var anchor = this;
        var removeClass = "show";
        var addClass = "hide";
        var diff = "+=300";
        var arrows = "&laquo;";
        if ($(anchor).hasClass("hide")) {
            diff = "-=300";
            removeClass = "hide";
            addClass = "show";
            arrows = "&raquo;";
        }
        $(".slider-arrow, .panel").animate({
            left: diff
        }, 700, function () {
            // Animation complete.
            $(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
        });
    });

    $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }
    });

   
    $('#add').click(function () {
    var listItems = $("#ultest").children();
    var id;
    if (typeof ($("#ultest li:last").attr('id')) == 'undefined') {
        //alert('undefint');
        id = "tc_1"
    } else {
        id = $("#ultest li:last").attr('id');
        var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length)
        count = parseInt(count);
        id = id.substring(0, index) + "_" + parseInt(count + 1);
       // alert(id)
    }
 
    $('#ultest').append('<li id=' + id + '><a href="#" class="foo">' + id + '</a></li>');
        addInmenu(id);
});

});

function addInmenu(id){
 
     var menuid="menu_"+id;
    // var data = $('#menuId li').html();
    if($('.tree li.parent').hasClass('active')){        
        $('#menuId li:first ').append('<ul style="display:block" ><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');
  
    }
    else{
        $('#menuId li:first ').append('<ul style="display:none" ><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');
 

    }
        $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }});
    $('.tree li.parent > a').unbind("click");
$('.tree...