Readmore - Inline Option

by freedawirl

HTML

<link rel="stylesheet" href="http://www.capmetro.org/css/re-brand.css">
<section class="contentborder">
    <article class="bio-wrap">
        <img src="http://www.capmetro.org/uploadedImages/Capmetro.org/About_Us/Leadership/LindaWatson.jpg">
         <h3>Linda S. Watson<span class="subtext">President/CEO</span></h3>

        <p>She has more than 25 years of transportation related experience. When Watson arrived at Capital Metro in August 2010, she set a high bar for service, oversight and accountability. With new leadership, a new vision and a new direction, Capital Metro has transformed into a more transparent, accountable and financially sustainable organization that is trusted and valued by the community.</p>
        <p>Capital Metro was the first transit system in Texas to earn the state comptroller’s highest level recognition for online financial transparency. As Watson likes to say, “You can see every dollar we spend online.”</p>
            <button class="read-more-toggle">show/hide more</button>
        <div class="read-more-content">
            <p>System-wide ridership on Capital Metro jumped more than one million last year. Austin area commuters have embraced the MetroRail commuter line with ridership more than tripling. With a strong community push for additional rail service, Watson shaped a new partnership with the City of Austin, paving the way for developing a regional high-capacity transit system plan.</p>
            <p>Before coming to Capital Metro, Watson was the chief executive officer of LYNX, the Central Florida Regional Transportation Authority in Orlando. She also previously served as the general manager of the Corpus Christi Regional Transportation Authority and was the assistant general manager of the Fort Worth Transportation Authority.</p>
            <p>Watson serves on the board of several organizations including:</p>
            <ul>
                <li>Circuit of the Americas Events Host Committee</li>
                <li>Texas...

CSS

.contentborder {
    width:740px;
}
/****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');
});