book mark list try out

by andrew rowe

HTML

<div id='contents'>
    <div id='compareDiv'>
        <ul id='compareList'>
            <li class="compareItem">
                 <h4>Region name</h4>

                 <h5>Stats</h5>
                <button id='shrink'>Shrink</button>
                <img src='http://www.artmatters.org.uk/close_img.png'/>

            </li>
            <li class="compareItem">
                 <h4>Region name</h4>

                 <h5>Stats</h5>
                <button>&lt;</button>
                <img src='http://www.artmatters.org.uk/close_img.png'/>

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

CSS

.compareItem > img {
	width: 20px;
	height: 20px;
}
#contents {
    border: 2px solid orange;
    padding: 1em;
}

#compareDiv {
    width:30%;
    border: 2px solid red;
}
#compareList {
    list-style-type: none;
    margin-top: 0px;
    margin-left: 0px;
    padding-left:0px;
    background-color: yellow;
}
.compareItem {
    border: 1px solid grey;
    border-radius: 10px;
    background-color:orange;
    margin-top: 5px;
    margin-left: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 0px;
}
.compareItem h4 {
    font-size: small;
    margin-top: 0px;
    border-radius: 10px;
    padding-left: 5px;
    background-color: rgba(128, 128, 128, 0.3);
}
.compareItem h5 {
    font-size: small;
    font-weight: normal;
    margin-top: 2px;
    line-height: 1.1em;
}

JavaScript

$('#shrink').click(function(){
  var li = $(this).parent();
  li.animate({height:0},"slow",function(){
      li.remove();
    }
  );
});