Uses
Details are used to organize information without overwhelming the user. The information is hidden until the user clicks on a link. Once clicked, the information is revealed. The user then can close the information to hide it again. Details work similar to the way accordions work.
Details are recognized by a solid arrowhead next to the link. When a user clicks the solid arrowhead, the information expands and the arrowhead rotates 180 degrees to signify the information can be collapsed when clicked.
Styles
Details are used in the top header section of the School of Medicine site. When the user clicks on "Information for", the content expands. The background of the content differs in color (#f1f1f1) from the main white background of the site. This allows the user visual distinction between the two areas of content.
Typically, a details section is in 3 columns. The first column is thehe heading (h2) and description (p). This appears on the left-hand side of the details container, approximately 220px wide on the desktop view. A divider line, or border-left, is used to separate the title and description from the links or supplemental information, which makes up the final 2 columns. The divider line is a 1px solid #d7d6d6 border.
Examples
The details section is most notably found in the top header of the School of Medicine site. When the user clicks "Information For", the content expands downward, pushing all the other content down with it. The user can either click the "Information For" or the "close" link to collapse the infomation.
Code
HTML
<![CDATA[
<div class="information-for-div hidden-header clearfix">
<div class="wrapper">
<div class="information-for-left">
<h2>Information for Our Community</h2>
<p>Whether you are part of our community or are interested in joining us, we welcome you to Washington University School of Medicine.</p>
</div>
<div class="information-for-right">
<ul class="information-for-list">
<li class="information-for-li"><a href="/info/prospective-students/">Prospective Students</a></li>
<li class="information-for-li"><a href="/info/current-students/">Current Students</a></li>
<li class="information-for-li"><a href="/info/faculty/">Faculty</a></li>
<li class="information-for-li"><a href="/info/staff/">Staff</a></li>
</ul>
<ul class="information-for-list">
<li class="information-for-li"><a href="/info/alumni-friends/">Alumni & Friends</a></li>
<li class="information-for-li"><a href="/info/administrators/">Administrators</a></li>
<li class="information-for-li"><a href="/info/researchers/">Researchers</a></li>
<li class="information-for-li"><a href="/info/job-seekers/">Job Seekers</a></li>
</ul>
</div>
<p class="information-for">close <span class="arrow arrow-down"> </span></p>
</div>
</div>
]]>
CSS
<![CDATA[
.information-for-left {
float: left;
margin: 22px 0;
padding: 0 55px;
width: 220px;
font-size: 14px;
}
.information-for-left h2 {
line-height: 28px;
}
.information-for-right {
float: left;
margin: 22px 0;
padding-left: 20px;
border-left: 1px solid #d7d6d6;
width: 609px;
}
.announcement-list,
.information-for-list {
*behavior: url( /wp-content/themes/medicine/_/js/boxsizing.htc );
box-sizing: border-box;
padding: 0 0 0 20px;
width: 50%;
float: left;
position: relative;
}
.ie7 .announcement,
.ie8 .announcement,
.ie9 .announcement,
.ie7 .information-for-li,
.ie8 .information-for-li,
.ie9 .information-for-li {
float: left;
width: 200px;
}
.information-for-li {
padding-right: 16%;
font-size: 15px;
margin-bottom: 20px;
}
.announcement {
padding-right: 16%;
font-size: 15px;
margin-bottom: 20px;
}
p.announcements {
float: right;
margin: -30px 16px 0 0;
font-weight: 700;
font-size: 11px;
cursor: pointer;
}
p.information-for {
float: right;
margin: -30px 16px 0 0;
font-weight: 700;
font-size: 13px;
cursor: pointer;
}
]]>
