JavaScript

Behavior of interface components that require script.

3-1 Collapse

Scripts for collapsible items, such as archived publications and abstracts.

3-1.1 Collapsible header

Collapsible header for pages such as ER Publications to hide and show information. Change icon image to plus or minus, as appropriate.

Header (Opened)

Title of publication

Some text here

Header (Closed)

<section class="show-section cf">
  <header class="category">
    <div class="m-9of12 t-10of12 d-10of12 m-o-1of12 t-o-1of12 d-o-1of12 aligncenter">
      <h6 class="section-title-assets">Header (Opened)</h6>
    </div>
    <div class="d-1of12 alignright">
      <img src="../assets/images/icon-minus.png" class="icon hideshow" width="30" height="30" alt="Hide this section">
    </div>
  </header>
  <article style="display: block">
    <div>
      <h5><a class="ti" href="/economic-research/publications/working-papers/2015/wp2015-15.pdf">Title of publication</a></h5>
        <p>Some text here</p>
    </div>
  </article>
</section>
<hr>
<section class="hide-section cf">
  <header class="category">
    <div class="m-9of12 t-10of12 d-10of12 m-o-1of12 t-o-1of12 d-o-1of12 aligncenter">
      <h6 class="section-title-assets">Header (Closed)</h6>
    </div>
    <div class="d-1of12 alignright">
      <img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Hide this section">
    </div>
  </header>
  <article style="display:none;">
    <div>
      <h5><a class="ti" href="/economic-research/publications/working-papers/2015/wp2015-15.pdf">Title of publication</a></h5>
        <p>Some text here</p>
    </div>
  </article>
</section>

3-1.2 Abstract

Abstracts for papers can be shown and hidden.

+ abstract

<div class="info"><a class="tog" href="#"><span>+</span> abstract</a>
<div class="collapsible" style="display: none;">Working paper abstract.</div></div>

3-1.3 Trancript or Request

Collapsible style for transcript and in-person tour requests.

Transcript

Quoted Person:

The quick brown fox jumps over the lazy dog.

Request a City Tour

Explore the Fed Center with a tour.

<div id="inner-content">
  <main id="main" class="m-all t-all d-all cf">
  <article class="m-all t-10of12 d-10of12 t-o-1of12 d-o-1of12">
    <section class="hide-section cf" id="transcript">
    <header class="category">
      <div class="m-8of12 t-10of12 d-10of12 m-o-2of12 t-o-1of12 d-o-1of12 aligncenter">
          <h3 class="section-title-assets">Transcript</h3>
      </div>
      <div class="m-2of12 t-1of12 d-1of12 alignright">
          <img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Show this section" style="cursor: pointer;">
      </div>
    </header>
    <article class="cf">
      <div class="m-all t-3of12 d-2of12">
        <p>Quoted Person:</p>
      </div>
      <div class="m-all t-9of12 d-10of12">
        <p>The quick brown fox jumps over the lazy dog.</p>
      </div>
    </article>
    </section>
    <section class="hide-section cf" id="transcript">
    <header class="category">
        <div class="m-8of12 t-10of12 d-10of12 m-o-2of12 t-o-1of12 d-o-1of12 aligncenter">
            <h3 class="section-title-assets">Request a City Tour</h3>
        </div>
        <div class="m-2of12 t-1of12 d-1of12 alignright">
            <img src="../assets/images/icon-plus.png" class="icon hideshow" width="30" height="30" alt="Show this section" style="cursor: pointer;">
        </div>
    </header>
    <article class="cf">
      <div class="m-all t-all d-all">
        <p>Explore the Fed Center with a tour.</p>
      </div>
    </article>
    </section>
  </article>
  </main>
</div>
<p class="cf"></p>

3-1.4 Economist abstract or supplement

Collapsible style for economist biography page.

Abstract

Supplement

<div class="economic-research page-template-page-er-economist-php">
<div id="bio-container-bottom">
<a class="tog abs" href="#">abstract <span>(+)</span></a>
<div class="collapsible abs" style="display: none;">Abstract</div>
<p></p>
<a class="tog abs" href="#">supplement <span>(+)</span></a>
<div class="collapsible abs" style="display: none;">Supplement</div>
<p></p>
<a class="tog abs" href="#">abstract <span>(-)</span></a>
<div class="collapsible abs" style="display: block;">Abstract</div>
<p></p>
<a class="tog abs" href="#">supplement <span>(-)</span></a>
<div class="collapsible abs" style="display: block;">Supplement</div>
</div>
</div>

3-2 Gallery

Gallery or slideshow function to cycle through elements.

3-2.1 Gallery 1 - Dark with Captions

Swipeable photo gallery. Dark gray background with centered elements and caption overlay at the bottom.

<div class="d-10of12 d-o-1of12" style="margin-top: 10px;">
    <div class="galleria" style="max-width:850px">
        <img src="../assets/images/sftemp.gif"
            data-big="../assets/images/sftemp.gif"
            data-title="Temporary quarters for the San Francisco Fed, 1920"
            data-description="San Francisco Fed employees worked in temporary quarters at Battery and Commercial streets in 1920 while the Bank's new building was under construction. &lt;span class=&lquotcaptionbar_credit&rquo style=&lquotfont-weight:400&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img src="../assets/images/sf_bondredemption.jpg"
            data-big="../assets/images/sf_bondredemption.jpg"
            data-title="IBM keypunch operator, 1949"
            data-description="Bond redemption department, Federal Reserve Bank of San Francisco. Every bond required 37 punchings.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img src="../assets/images/sf_cafeteria.jpg"
            data-big="../assets/images/sf_cafeteria.jpg"
            data-title="San Francisco Fed cafeteria, circa 1950"
            data-description="This cafeteria in the 400 Sansome St. building was in use through 1982, when the San Francisco Fed moved to its new building at 101 Market Street. You could get a hot meal for 85 cents in 1975.&lt;span class=&lquot;captionbar_credit&rquo;&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img src="../assets/images/sf_mainlobby.jpg"
            alt="San Francisco Fed lobby in the 1940s"
            data-big="../assets/images/sf_mainlobby.jpg"
            data-title="San Francisco Fed lobby in the 1940s"
            data-description="Entrance lobby and view into Securities Services department, 400 Sansome Street. The building's architect was George Kelham, and the mural above the doorway is called &ldquo;Traders of the Adriatic.&rdquo;&lt;span class=&lquot;captionbar_credit&rquo;&gt;
            Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_rolledcoin.jpg"
            data-big="../assets/images/sf_rolledcoin.jpg"
            data-title="Rolling coin, circa 1950 "
            data-description="The San Francisco Fed began rolling coins as a service in 1949. The service was later transferred to armored carrier companies.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_jobapplicant.jpg"
            data-big="../assets/images/sf_jobapplicant.jpg"
            data-title="Applying for a job, circa 1950"
            data-description="Personnel department at the San Francisco Fed.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt; ">
        <img
            src="../assets/images/sf_sbprocessing.jpg"
            data-big="../assets/images/sf_sbprocessing.jpg"
            data-title="Savings bond processing area, San Francisco Fed, circa 1950"
            data-description="This photo was taken in the savings bond processing area of the San Francisco Fed.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_transfer.jpg"
            data-big="../assets/images/sf_transfer.jpg"
            data-title="Face-to-face transfer, circa 1950"
            data-description="Customers were allowed to receive currency at the San Francisco Fed's window through face-to-face transfers in the 1950s. For security reasons, this method was discontinued.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
        <img
            src="../assets/images/sf_ibm_proofmachines.jpg"
            data-big="../assets/images/sf_ibm_proofmachines.jpg"
            data-title="IBM proof machines, 1951"
            data-description="These check processing machines were first installed at the San Francisco head office in 1944. By 1951, San Francisco had 37 machines in operation.&lt;span class=&lquotcaptionbar_credit&rquo&gt; Image courtesy of the Federal Reserve Bank of San Francisco Archive&lt;/span&gt;">
    </div>
</div>
<p class="clearfix"></p>