Readmore - Inline Option v02

by freedawirl

HTML

<link rel="stylesheet" href="http://www.capmetro.org/css/re-brand.css">
<div class="content-row">
    <h3>Fares Safety Net Programs</h3>
<hr>
<p> With our social service agency partners, Capital Metro has established a robust safety net program to ensure our service remains accessible to all members of the community.</p>

            <button class="read-more-toggle">show/hide more</button>
        <div class="read-more-content">
            <p> Capital Metro works with over 230 local social service agencies through its Discount Pass Program, and is a founding partner of the Basic Transportation Needs Fund, contributing $1.2 million dollars to-date since the program began in 2011. These programs provide deeply discounted or free passes for social services agencies serving our neighbors in need.</p>
        </div>
</div>
    
    <!-- /Leadership Bio -->
    <div class="clear"></div>

CSS

.contentborder {
    width:340px;
}
/****BioStyles****/
 .bio-wrap {
    float: left;
    display: block;
    background-color: rgba(178, 180, 178, 0.1);
    box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.05);
    padding: 10px;
}
.bio-wrap strong {
    margin-bottom: 15px;
}
.bio-wrap strong {
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8);
    font-size: 18px;
    color: #e71e26;
}
.bio-wrap strong {
    margin-bottom: 15px;
}
.bio-wrap i {
    clear: left;
    color: #626362;
    font-family: Georgia, Palatino, "Times New Roman", Times, serif !important;
    font-size: 16px;
    margin: 5px 0;
    display: inline-block;
}
.bio-wrap p {
    text-align:justify;
}
.bio-wrap img {
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    margin: 0 20px 10px 0;
    width: 200px;
    float:left;
}
.bio-wrap {
    float: left;
    display: block;
    background: #f5f5f5;
    padding: 20px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    position:relative;
}
.bio-wrap h3 {
    margin-bottom:10px !important;
}
span.subtext {
    display: block;
    color: #676767;
    font-size: 14px;
    font-style:italic;
    margin-top: 10px;
}
/*Read More*/
 button.read-more-toggle {
    position: absolute;
    bottom: -33px;
    left: 20px;
}
}
.read-more-content {
}
.bio-wrap p {
    padding: 0px !important;
}
.bio-wrap-footer {
    height:40px;
    background:#0069aa;
    margin-bottom: 40px;
    clear:both;
}
article {
}
.hide {
    display: none;
}
.clear {
    clear:both;
}

JavaScript

// Hide the extra content initially, using JS so that if JS is disabled, no problemo.
$('.read-more-content').addClass('hide');

// Set up the toggle.
$('.read-more-toggle').on('click', function () {
    $(this).next('.read-more-content').toggleClass('hide');
});