JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div id="toc">
    <h3>Operations and General Information</h3>
<strong>Which GSA office is procuring and leading the office relocation services portion of the move to 1800 F Street?</strong>

Response: The Office of Administrative Services will be coordinating and leading the relocation efforts with support from the appropriate NCR, PBS and FAS staff.

<strong>Where can I go to keep up with specific details about the building, the neighborhood, the amenities, and other developments that impact me?</strong>

Response: The 1800 F Transformation Team updates its website every two weeks with useful information about the project and preparations for moving back into 1800 F. You can visit the website at insite.gsa.gov/1800f.   The website may be updated more frequently than every two weeks as information changes.

<strong>How will this impact my commute?</strong>

Response: How your commute is impacted depends on where you live; for some, 1800 F may be a closer commute and for others it may be longer.  1800 F is well-situated for a variety of public transportation options - four blocks from Farragut West Metro station, six blocks from Farragut North, near SLUG lines, and several Metro and commuter bus routes.  In addition, there are approximately 20 parking garages within a half mile of the building.

<strong>What have you found in terms of occupancy percentage per day?</strong>

Response: Occupancy data has been compiled from OCS, Crystal Plaza 4, Crystal Plaza 3, and 1800 F during the week before and after the end of the fiscal year.  This data showed that the average daily occupancy of the buildings was 53%.

<strong>Do these occupancy numbers include contractors?</strong>

Response: Yes.

<strong>Will street level retail be open to the public?</strong>

Response: Yes.

<strong>Will people need to reserve work space on an ongoing basis or will they have permanent assigned work areas?</strong>

Response: There will be a blend of assigned and shared workstations for...

CSS

h3 {
    font-weight: bold; 
    font-size: 20px;
}
li.section-head {
    list-style: none;
}
.section-head > a {
    font-size: 1.4em; 
    font-weight: bold;
}
.back-to-top {
    display: block; 
    margin-bottom: 1em;
}
.toc-index {
    margin-bottom: 2em;
}

JavaScript

$(function(){
    $('#toc').prepend('<ul class="toc-index" />');
    var hcount = 0;
    $('#toc h3').each(function(){
        hcount++;
         var contents = $(this).html();
        $(this).attr('id','section-' + hcount);
        $(this).addClass('header3');
        console.log('hcount is ' + hcount);
        $('.toc-index').append('<li class="section-head" id="target-section-' + hcount + '"><a href="#section-' + hcount + '">' + contents + '</a><ul></ul></li>');   
               
    });
    steptwo(); 
});

function steptwo(){
        var count = 0;
        $('#toc strong').each(function(){        
            count++;
            var contents = $(this).html();
            var hpadre = $(this).prevAll('.header3', '#toc').first().attr('id');        
            console.log('hpadre is ' + hpadre);
            $(this).wrap('<div class="toc-piece" id="' + count + '" />');
            $(this).prepend('<a href="#target-section-1" class="back-to-top">Back to the Top</a>');
            $('#target-' + hpadre + ' ul').append('<li><a href="#' + count + '">' + contents + '</a></li>');
        });
}

// smooth scrolling to FAQ items – mostly decorative below


$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
 
  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash =...