{literal}
<script>
$(document).ready(function(){
	
	$('.panel-body li.menu_li  ').click(function(){
		  $(".panel-body li.menu_li  .ui-link").css("background-color","");
		   $('.panel-body li.menu_li').css("background-color", "");
        	 $(this).css("background-color", "#eee");
        	 $(this).children("ul").css({'width':'100%', 'right':'0'});
		});
		
	$('.panel-body li.menu_li .submenu li').click(function(){
		  $(".panel-body li.menu_li .submenu li").css("background-color","");
		   $('.panel-body li.menu_li').css("background-color", "");
        	 $(this).css("background-color", "#eee");
        	 $(this).children("ul").css({'width':'100%', 'right':'0'});
		}); 
	
	$('.uqipment-menu .panel-heading').click(function(){
		
		  $(".uqipment-menu .panel-heading").css("background-color","");
		   $('panel-body li.menu_li  .ui-link').css("background-color", "");
		   $('.panel-body li.menu_li').css("background-color", "");
		   $('.panel-body li.menu_li .submenu li').css("background-color", "");
        	 $(this).css("background-color", "#eee");
		});
	
});
</script>

<style>
.submenu{display:none;}
.panel-body{text-shadow:none;}
.panel-body li.menu_li:active,.panel-body li.menu_li :hover {background-color:#eee;}
.panel-body li.menu_li .submenu li:active,.panel-body li.menu_li .submenu li:hover {background-color:#eee;}
.panel-heading:active,.panel-heading:hover{background-color:#eee;}
</style>

{/literal}
{if $parent != "" || !empty($categories[$parent].children)}

    <section>
      <div class="main-wrapper">
        <div class="uqipment-menu" id="menu_wrapper_tablist">
			  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
				  <div class="panel panel-default">
					<div class="panel-heading" role="tab" id="heading11">
					  <h4 class="panel-title">
						<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse11" aria-expanded="true" aria-controls="collapse11">
						  <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Used Equipment
						</a>
					  </h4>
					</div>
					<div id="collapse11" class="panel-collapse collapse " role="tabpanel" aria-labelledby="heading11">
					  <div class="panel-body">						
						<ul>
							<!-- <li class="menu_li"><a href="used-equipment/" style="font-weight: bold;">All Used Equipment</a></li> -->
									
									{foreach from=$categories item="category" name="cat"}  
									{if $category.parent == 1}
									<li class="menu_li">
										{if !empty($category.children)}								
										<a href="javascript:void(0);" style="display:block;">{$category.name}   {if !empty($category.children)}  <b style="float:right;padding-right: 5px;"><i class="fa fa-caret-down"></i></b>{/if}  </a>
										{else}
										<a href="{$category.category_url}">{$category.name}  </a>
										{/if}
										{if !empty($category.children)}
										<ul class="submenu">									
											<li><a href="{$category.category_url}" style="display:block;font-weight: bold;">All {$category.name}</a></li>
											{foreach from=$category.children item="category" name="cat"}
											<li><a href="{$category.category_url}" style="display:block;">{$category.name}  </a></li>
											{/foreach}							  
										</ul>
										{/if}
									</li>
									{/if}
								{/foreach}  								
					  </ul>
					  </div>
					</div>
				  </div>
				  <div class="panel panel-default">
					<div class="panel-heading" role="tab" id="heading22">
					  <h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse22" aria-expanded="false" aria-controls="collapse22">
						  <span class="glyphicon glyphicon-play" aria-hidden="true"></span> New Equipment
						</a>
					  </h4>
					</div>
					<div id="collapse22" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading22">
					  <div class="panel-body">
						<ul>
						<!-- <li class="menu_li"><a href="new-equipment/" style="font-weight: bold;">All New Equipment</a></li> -->
							{foreach from=$categories item="category" name="cat"}  
							{if $category.parent == 2} 
							<li class="menu_li">								
								{if !empty($category.children)}								
								<a href="javascript:void(0);" style="display:block;">{$category.name} {if !empty($category.children)}  <b style="float:right;padding-right: 5px;"><i class="fa fa-caret-down"></i></b>{/if}  </a>
								{else}
								<a href="{$category.category_url}">{$category.name}</a>
								{/if}
								
							{if !empty($category.children)}
							<ul class="submenu">
								<li><a href="{$category.category_url}" style="display:block;font-weight: bold;">All {$category.name}</a></li>
								{foreach from=$category.children item="category" name="cat"}
								<li><a href="{$category.category_url}" style="display:block;">{$category.name} </a></li>
								{/foreach}							  
							</ul>
							{/if}
							
							</li>
							{/if}
							{/foreach} 						  
						</ul>
					  </div>
					</div>
				  </div>
				  <div class="panel panel-default">
					<div class="panel-heading" role="tab" id="heading33">
					  <h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse33" aria-expanded="false" aria-controls="collapse33">
						  <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Materials & Tools
						</a>
					  </h4>
					</div>
					<div id="collapse33" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading33">
					  <div class="panel-body">
						<ul>
						{foreach from=$categories item="category" name="cat"}  
							{if $category.parent == 68} 
							<li class="menu_li"><a href="{$category.category_url}">{$category.name}</a></li>
							{/if} 
						{/foreach} 
					  </ul>
					  </div>
					</div>
				  </div>
				  <!-- ADD RENTAL BUTTON -->
				  <div class="panel panel-default">
					<div class="panel-heading" role="tab" id="heading55">
					  <h4 class="panel-title">
						<a class="collapsed" href="{$url_base}rentals/" style="color:#000;"> 
						  <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Rentals
						</a>
					  </h4>
					</div>
				  </div>
				  <!-- ADD RENTAL BUTTON -->
				  <div class="panel panel-default">
					<div class="panel-heading" role="tab" id="heading44">
					  <h4 class="panel-title">
						<a class="collapsed" href="/index.php?p=my_equipment&mode=insert&mobile=1" style="color:#000;">
						  <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Sell My Equipment
						</a>
					  </h4>
					</div>
					
				  </div>
				</div>
          
        </div>
      </div>
    </section>

{/if}