Sliding list

BizViz micro

by ataylor

HTML

<h1>What You'll Get</h1>
<ul class="slide">
    <li><div class="title">Website</div>
        <div class="description">Get your own lead generating website. This website is custom designed and generates leads daily using our Local Search Tool Technology. In addition, this website is optimized for your city so it will show organically in search engines for Local SEO Company in your city.</div>
    </li>
    <li><div class="title">Leads</div>
        <div class="description">Our Agency Partners get a constant flow of leads. By using our Local Search Tool technology our Agency Partners get daily leads from local businesses checking there online visibility on their lead gen site. We help push traffic to your sites via organic and PPC campaigns. Each lead is emailed directly to you with the level of urgency. All you need to do is make contact, consult with the client and advise on what they need to achieve their goals.</div>
    </li>
    <li><div class="title">Google+ Local Management</div>
        <div class="description">We set up, optimize and monitor each business’s Google+Local and Google+ account. Our management program is based on the latest Local SEO techniques and changes with the algorithm changes introduced by the search engines.</div>
    </li>
    <li><div class="title">Training Material</div>
        <div class="description">Our Agency Partners get the complete training video series. They learn everything from technical aspects of SEO and Social Media to sales techniques. Learn how to approach businesses, build their trust, consult and make the sale. Then learn how to retain the client month after month. This is the key to an ongoing reoccurring revenue stream.</div>
    </li>
    <li><div class="title">Contracts</div>
        <div class="description">Get access to all of the contracts you need to close a deal. Our contracts have been used again and again and are lawyer approved.</div>
    </li>
    <li><div class="title">Sales Scripts</div>
        <div...

CSS

ul.slide{
    position: relative;
    overflow: hidden;
    margin: 10px 0 0 25px;
    font-size: 14px;
    list-style-type: disc !important;
}

ul.slide .title{
    font-size: 18px;
    font-weight: bold;
}

ul.slide li{
    padding: 10px 0 0 15px;
}

ul.slide .title{
    color: #21548D;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

JavaScript

jQuery('ul.slide li').each(function() {
    jQuery(this).css('cursor', 'pointer');
    jQuery(this).click(function() {
        jQuery(this).find('.description').slideToggle();
    }); //end click function
}); // end each slide list item click function
jQuery('ul.slide .description').hide();