read more

by chris callaghan

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="click"> </div><li class="cat-item cat-item-77 cat-parent"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/">Back Support &amp; Orthopaedic</a><ul class="children">
<li class="cat-item cat-item-78"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/ankle-shin-foot/">Ankle, Shin &amp; Foot</a></li>
<li class="cat-item cat-item-79"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/back-cushions-lumber-spine-comfort/">Back Cushions, Lumber &amp; Spine Comfort</a></li>
<li class="cat-item cat-item-80"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/back-support-belts/">Back Support Belts</a></li>
<li class="cat-item cat-item-81"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/back-therapy/">Back Therapy</a></li>
<li class="cat-item cat-item-82"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/elbow-supports-tennis-elbow-supports/">Elbow Supports &amp; Tennis Elbow Supports</a></li>
<li class="cat-item cat-item-83"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/knee-supports-knee-braces/">Knee Supports &amp; Knee Braces</a></li>
<li class="cat-item cat-item-84"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/neck-brace-neck-supports-neck-collars/">Neck Brace, Neck Supports &amp; Neck Collars</a></li>
<li class="cat-item cat-item-85"><a href="http://sample66.co.uk/sample/chris/compare/product-category/back-support-orthopaedic/rsi-products/">RSI Products</a></li>
<li class="cat-item cat-item-86"><a...

CSS

body { padding: 10px; }
.click {padding-left:20px;
background:#000;
    width:20px;
    height:20px;
    float:left;
}

JavaScript

$(function() {
    
    // first hide the content for the read more
    $( ".children" ).css("display", "none");
    
    // upon clicking the button do this function
    $( ".click" ).click(function() {
        
        // slide toggle animates the more link
        $( ".children" ).slideToggle();
        
        // or normal toggle does it instantly (uncomment below)
        // $( ".children" ).toggle();
    });
});