Make second level UL take 100% with special behaviour

I am trying to make a custom tree view to shop trough diverse categories on my website. You can see what I want to do here on fiddle. I need the second level UL to take all the space under the current row of selected li without making other li of the row moving.

Here is my code

HTML:

<ul Class="CategoriesContainer">
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>

CSS:

.CategoriesContainer{
width:90%;
display:Block;
list-style:none;
}
.CategoryButton{
    height:130px;
    width:130px;
    display:inline-block;
    margin-left:5px;
    margin-top:5px;
    background-color:lightgray;
     text-align:center;
    cursor:pointer;
    list-style-type:none;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.UpperHalf {
    display:block;
    height:50%;
    width:100%;
}
.LowerHalf {
    display:block;
    height:50%;
    width:100%;
}
.CategoryImage
{
   height:40px;
   width:40px;
    vertical-align:middle;
}
.CategoryText {
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}
.TreeContainer {
    width:100%;
    display:none;

}
.Toggled
{
   left:0;
   top:0;
   padding:0; 
   margin:0; 
   white-space:nowrap;
   display:block;
   background-color:green;
}

Javascript

$(".CategoryButton").click(function () {
var Container = $(this).find(".TreeContainer")[0];
if ($(Container).hasClass("Toggled"))
{
    $(Container).removeClass("Toggled");
}   
else
{
    $(Container).addClass("Toggled");
}

});

Regards


Source: html

Leave a Reply