<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css' />
<link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="integration-list">
<ul>
<li>
<div class="expand"><img src="http://via.placeholder.com/75x75"/>
<div class="blurbbb-arrow">+</div>
<div class="tidbity">
<h2>This is a super long name as an example</h2>
<span>###. Occupation. Member Group. Sexuality. Marital Status. </span>
</div>
</div>
<div class="detail">
<div id="blurbbb" style="width:500px;height:100%;padding-left:10px;">
<div id="sup">
<div><span><img src="http://via.placeholder.com/200x300"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
<br />
<br />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="expand"><img src="http://via.placeholder.com/75x75"/>
<div class="blurbbb-arrow">+</div>
<div class="tidbity">
<h2>This is a super long name as an example</h2>
<span>###. Occupation. Member Group. Sexuality. Marital Status. </span>
</div>
</div>
<div class="detail">
<div id="blurbbb" style="width:500px;height:100%;padding-left:10px;">
<div id="sup">
<div><span><img src="http://via.placeholder.com/200x300"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
<br />
<br />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="expand"><img src="http://via.placeholder.com/75x75"/>
<div class="blurbbb-arrow">+</div>
<div>
<h2>This is a super long name as an example</h2>
<span>###. Occupation. Member Group. Sexuality. Marital Status. Little tidbit of info </span>
</div>
</div>
<div class="detail">
<div id="blurbbb" style="width:500px;height:100%;padding-left:10px;">
<div id="sup">
<div><span><img src="http://via.placeholder.com/200x300"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
<br />
<br />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="expand"><img src="http://via.placeholder.com/75x75"/>
<div class="blurbbb-arrow">+</div>
<div class="tidbity">
<h2>This is a super long name as an example</h2>
<span>###. Occupation. Member Group. Sexuality. Marital Status. </span>
</div>
</div>
<div class="detail">
<div id="blurbbb" style="width:500px;height:100%;padding-left:10px;">
<div id="sup">
<div><span><img src="http://via.placeholder.com/200x300"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
<br />
<br />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="expand"><img src="http://via.placeholder.com/75x75"/>
<div class="blurbbb-arrow">+</div>
<div class="tidbity">
<h2>This is a super long name as an example</h2>
<span>###. Occupation. Member Group. Sexuality. Marital Status. </span>
</div>
</div>
<div class="detail">
<div id="blurbbb" style="width:500px;height:100%;padding-left:10px;">
<div id="sup">
<div><span><img src="http://via.placeholder.com/200x300"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
<br />
<br />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="expand"><img src="http://via.placeholder.com/75x75"/>
<div class="blurbbb-arrow">+</div>
<div>
<h2>This is a super long name as an example</h2>
<span>###. Occupation. Member Group. Sexuality. Marital Status. Little tidbit of info </span>
</div>
</div>
<div class="detail">
<div id="blurbbb" style="width:500px;height:100%;padding-left:10px;">
<div id="sup">
<div><span><img src="http://via.placeholder.com/200x300"/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
<br />
<br />
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#integration-list {
font-family: 'Open Sans', sans-serif;
width: 550px;
margin: 0 auto;
display: table;
background: #fff;
color: #999;
}
#integration-list ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#integration-list ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
}
#integration-list ul:last-child {
border-bottom: 1px solid #ddd;
}
#integration-list ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
height: 75px;
}
.expand h2 {
padding: 0;
margin: 0;
font-size: 22px;
font-weight: 400;
font-family: 'Signika', sans-serif;
}
.expand span {
font-size: 12.5px;
font-family: georgia, sans-serif;
text-align: justify;
}
.expand img {
float: left;
margin: 5px 5px 5px 0;
}
#blurbbb{
display: table;
text-align: justify;
width: 500px;
height: 100%;
}
#blurbbb img {
float: left;
margin: 5px 5px 5px 0;
width: 200px;
height: 300px;
}
#sup{
display: table-cell;
vertical-align: middle;
width: 80%;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
font-family: georgia, sans-serif;
font-size: 12px;
text-align: justify;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 100%;
}
.detail span{
margin: 0;
font-family: georgia, sans-serif;
font-size: 12px;
text-align: justify;
}
.blurbbb-arrow {
margin-top: 12px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
.icon {
height: 75px;
width: 75px;
float: left;
margin: 0 15px 0 0;
}
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(200);
$expand = $(this).find(">:first-child");
if($expand.text() == "+") {
$expand.text("-");
} else {
$expand.text("+");
}
});
});
