HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="menu">
<h2 class="site-title">The Judah Will</h2>
<div class="tag-line">An Annotation Project by the 2017 Digital History Class at VCU</div>
<div class="nav">
<div class="button" id="credits" data-page="about">About</div>
<div class="button" id="credits" data-page="viewingthewill">The Document</div>
<div class="button" id="people" data-page="people">People</div>
<div class="button" id="afam" data-page="african-americans">African Americans</div>
<div class="button" id="places" data-page="judaism">Judaism</div>
<div class="button" id="places" data-page="places">Places</div>
<div class="button" id="places" data-page="word-cloud">Text</div>
<div class="button" id="credits" data-page="authors">Credits</div>
</div>
</div>
<div class="extra-info">
<div class="directions" id="directions-people">
Click on a person's name in the will to display additional information about that individual below. Their name will be highlighted wherever it is mentioned in the will. All names will be underlined.
</div>
<div id="personDetails">
<div class="directions">Interact by clicking the buttons above or by clicking on the names in the document.</div>
</div>
<div id="hiddenDetails">
</div>
</div>
<div class="plain" id="theWill">
<p>
In the name of God Creator of Heaven & of ~ Earth Amen. אָמֵן - I, <span class="person" data-person="isaac-h-judah">Isaac H. Judah</span>, of the City of Richmond, and State of Virginia, seriously considering the uncertainty of human life, and my
mind being impressed, as to the great necessity of making provisions of my worldly matters, in the event of a termination of my terrest[r]ial existence, do make and ordain my last will & testament, in manner and form following, which I enjoin and
require to be fulfilled and executed in every respect according to my intentions and wishes in manner & form following, that is to say -
</p>
<p id="p2">
1st / It is my will and desire to have the usual השכבה (Hashcuba), and also a suitable tomb stone [see image 1 below] placed over my body, that I may remain undisturbed.
</p>
<p id="p3">
2nd / I give and bequeath my slave <span class="person" data-person="maria">Maria</span> to <span class="person" data-person="david-judah">David Judah</span>, one of my executors, hereinafter named, to be held by him in trust for the following uses
and purposes, viz. that said <span class="person" data-person="david-judah">David Judah</span> shall hire out the said slave <span class="person" data-person="maria">Maria</span> for fifteen years, ever considering the happiness and comfort of said
slave, in selecting the persons to whom she is to be hired and using his own discretion and good feelings on the subject. That all sums of money received by him for the hire of said slave, shall be carefully deposited in Bank, or placed out on interest
from time to time, with indisputable security, and at the expiration of said fifteen years, or so soon thereafter as the same shall be required by her the said <span class="person" data-person="maria">Maria</span> in writing attested by two or more
respectable witnesses, it is my will and desire, and I do hereby direct my executors hereinafter named, to manumit & set free the said ^slave <span class="person" data-person="maria">Maria</span> and such children as she may have at the time by deed
or deeds duly executed and recorded according to law and that the money which may have arisen from the hiring of said slave with whatever interest may have accumulated thereon shall be paid to the said <span class="person" data-person="maria">Maria</span>,
if alive, and if not to her children then living as soon as she or they may be made free as aforesaid.
</p>
<p id="p4">
3d/ I give and bequeath my slave <span class="person" data-person="betsey">Betsey</span> to <span class="person" data-person="david-judah">David Judah</span>, one of my executors hereinafter named, to be held by him in trust for the following uses
and purposes, viz. that the said <span class="person" data-person="david-judah">David Judah</span> shall hire out said slave <span class="person" data-person="betsey">Betsey</span> for fifteen years ever considering the comfort and happiness of said
slave in selecting the persons to whom she is to be hired and using his own discretion & good feeling on the subject. That all sums of money received by him for hire of said slaves shall be carefully deposited by said <span class="person" data-person="david-judah">David Judah</span> in Bank, or placed out on interest from time to time, with indisputable security, and at the expiration of said fifteen years or so soon thereafter as the same shall be required by her the said <span class="person" data-person="betsey">Betsey</span> in writing, attested by two or more respectful
witnesses, it is my will and desire, and I do hereby direct my executors hereinafter named to manumit & set free the said ^slave <span class="person" data-person="betsey">Betsey</span> and such children as she may have at the time by deed or deeds
duly executed and recorded according to law and that the money which may have arisen from the hiring of said slave with whatever interest may have accumulated thereon shall be paid to said <span class="person" data-person="betsey">Betsey</span>, if
alive, and if not, to her children then living, as soon as she or they may be made free as aforesaid.
</p>
<p>
4th - It is my will and desire that a suitable Tomb stone [see image 1 below] be placed over the remains of my honoured <span class="person" data-person="abigail-judah">mother</span>, the late Mrs. <span class="person" data-person="abigail-judah">Abigail Judah</span>… at the expense of my estate.
</p>
<p>
5th- I give and bequeath to <span class="person" data-person="philip-norborne-wythe">Philip Norborne Wythe</span> & <span class="person" data-person="benjamin-wythe">Benjamin Wythe</span> [see image 2 below], free mulatto boys & brothers whom I brought
up, in consideration of their attachment & fidelity, and my natural regard for them, the following property, viz. to <span class="person" data-person="philip-norborne-wythe">Philip
Norborne</span> twenty five feet of ground on the <span class="place" data-place="">Brook road</span> fronting on that road and running back one hundred and twenty seven feet to a fifteen foot alley, adjoining <span class="person" data-person="simon-block">Simon Block</span>’s lot on the
south and bound ~ on the north by the lot hereinafter devised to his brother <span class="person" data-person="benjamin-wythe">Benjamin Wythe</span> - and I also bequeath to him said <span class="person" data-person="philip-norborne-wythe">Philip Norborne</span> the sum of three hundred dollars to be paid to him by my executors, within five years according to the discretion of my executors, and the situation of my estate, to him, his heirs and assigns forever. To the said <span class="person" data-person="benjamin-wythe">Benjamin Wythe</span> I give & bequeath twenty five feet of ground at the intersection of <span class="place" data-place="">M [Duval] Street</span> and the <span class="place" data-place="">Brook road</span> ^in the city of Richmond, fronting twenty five feet on the <span class="place" data-place="">Brook ro[ad]</span>, running back one hundred & twenty seven feet to a fifteen foot alley and
bounded on the south by the lot herein devised to his brother <span class="person" data-person="philip-norborne-wythe">Philip Norborne</span>, and on the north by <span class="place" data-place="">M street</span>, and also the sum of five hundred dollars, to be paid him by my executors within
five years according to their discretion and the situation of my estate to him said Benjamin, his heirs and assigns forever.
</p>
<p>
6th/ I direct that the lot on which I now reside be laid off and divided into two parts by a line running from <span class="place" data-place="">L to M Street</span> so as to give a front of an equal number of feet to each part on said two streets, the eastern half of which, and on which is
the dwelling house now occupied by me. I give and bequeath to my executors hereinafter named, their heirs and assigns forever, to have and to hold the same in trust for the use, benefit and occupation of my niece <span class="person" data-person="abigail-de-pass">Abigail De Pass</span> during her natural life, and after her death to some one or more of my brothers or sisters, or their descendants, as she the said <span class="person" data-person="abigail-de-pass">Abigail</span> may designate by her deed or will in writing, to them,
their heirs or assigns forever. I also give & bequeath to my said executors fifty feet of ground on <span class="place" data-place="">L street</span>, in the city of Richmond, being at a corner of a street laid off ^by me, denoted <span class="place" data-place="">Judah Street</span>; being thirty feet wide by the new fence, and
running back from <span class="place" data-place="">L street</span> one hundred and twenty four feet. Also fifty feet of ground fronting on <span class="place" data-place="">second street</span>, the corner above <span class="person" data-person="c-christian">C. Christian</span>'s' part of lot number in Williamson’s plan (not yet
recorded, which I require to be done, it being amongst my papers also the plan a survey of <span class="person" data-person="r-young">R. Young</span>’s of tenement number four, my residence) which said two last pieces or lots of ground, I devise to
my said executors, their heirs and assigns, to have and to hold the same for the use and benefit of my said niece <span class="person" data-person="abigail-de-pass">Abigail De Pass</span>, during her natural life, and after her death, to some one
or more of my brothers or sisters, or their descendants as she the said <span class="person" data-person="abigail-de-pass">Abigail</span> may designate by her deed or will in writing to them, their heirs, and assigns forever and I also give & bequeath
to my said executors my slave <span class="person" data-person="harry">Harry</span>, to be held by them in trust for the use & benefit of my said niece <span class="person" data-person="abigail-de-pass">Abigail De Pass</span>, in the same manner and
subject to the same limitation as the lots herein before devised for her use and benefit.
</p>
<p>
7th / I give & bequeath to my much esteemed friend & neighbour Capt <span class="person" data-person="john-goddin">John Goddin</span>, of the city of Richmond, the lot of ground on the <span class="place" data-place="">north side of Bacon Branch</span>, which I purchased from said
<span class="person" data-person="john-goddin">Goddin</span> and <span class="person" data-person="wife-john">wife</span>, and which is designated by the number two hundred and eighty eight to him said <span class="person" data-person="john-goddin">Goddin</span> his heirs and assigns forever.
</p>
<p>
8/ [Written sideways in the margin] I give and bequeath ^ to my niece <span class="person" data-person="rachel-judah">Rachel</span> the daughter of my brother <span class="person" data-person="moses-judah">Moses H. Judah</span>, my lot at the corner
of <span class="place" data-place="">L. street and the Brook road</span> in the city of Richmond, containing a front of sixty feet on the Brook road and running back one hundred and twenty feet, to her and her heirs and assigns forever.
</p>
<p>
9th/ I give and bequeath to my brother <span class="person" data-person="moses-judah">Moses H. Judah</span>, one fourth of the square, which I purchased of <span class="person" data-person="samuel-coleman">Samuel Coleman</span>, beginning on <span class="place" data-place="">M street,
at Roper’s or Skipwith’s line</span>, and running on said street one hundred and sixty seven feet, or one half of the front, and including the Dutched roof - house thereon, to have and to hold the same to him the said <span class="person" data-person="moses-judah">Moses H. Judah</span>,
during his life, and after his death to the said <span class="person" data-person="rachel-judah">Rachel</span>, daughter of said <span class="person" data-person="moses-judah">Moses H. Judah</span>, her heirs & assigns forever.
</p>
<p>
10th/I give and bequeath to my nephew <span class="person" data-person="gershom-judah">Gershom</span> the son of my brother <span class="person" data-person="manuel-judah">Manuel Judah</span>, thirty feet of ground fronting on <span class="place" data-place="">L street</span> on the City
of Richmond, running back one hundred & twenty four feet and adjoining the fifty feet of ground herein devised in trust for the benefit of <span class="person" data-person="abigail-de-pass">Abigail De Pass</span> for life, to have and to hold the
same to him - said
<span class="person" data-person="gershom-judah">Gershom</span> his heirs and assigns forever.
</p>
<p>
11th/ I give and bequeath to my niece <span class="person" data-person="abigail-judah">Abigail Judah</span> ^the daughter of my brother <span class="person" data-person="manuel-judah">Manuel Judah</span> thirty feet of ground, fronting on <span class="place" data-place="">L street</span>
in the city of Richmond, running back one hundred and twenty four feet and adjoining the thirty feet herein devised to her brother <span class="person" data-person="gershom-judah">Gershom</span>, to her said <span class="person" data-person="abigail-judah">Abigail Judah</span> her heirs and assigns forever. Also a negro girl <span class="person" data-person="aggy">Aggy</span> I give & bequeath to my said niece <span class="person" data-person="abigail-judah">Abigail</span> her heirs & assigns forever.
</p>
<p>
12th/<span class="place" data-place="">The half of the Garden lot</span>, or that part of it which is bounded on the east by the half of the same devised to my executors, in trust to the use & benefit of <span class="person" data-person="abigail-de-pass">Abigail De Pass</span> for life,
as herein before mentioned, and which is bounded by <span class="place" data-place="">Judah Street</span> on the West. I give & bequeath to all my nephews and nieces, their heirs & assigns forever, to be laid off in equal lots according to the number of my nephews and nieces and divided
by lot, each of them to have such lot as may be drawn against their several names on their arriving respectively to the age of twenty one years old, as some may be inclined to retain them and my nephews and nieces herein specifically mentioned by
name are not to be excluded.
</p>
<p>
13th/ I give and bequeath to my said niece <span class="person" data-person="abigail-de-pass">Abigail De Pass</span> fifty feet of ground of the same lot adjoining that devised to my executors, in trust for her use and benefit for life, as herein
before mentioned, fronting on <span class="place" data-place="">second street</span> in the city of Richmond, to the ten feet alley one hundred & twenty seven feet deep to her and her heirs and assigns forever.
</p>
<p>
14th/It is my will & desire that my faithful old slave <span class="person" data-person="toby">Toby</span> shall be maintained & clothed during his life by my executors, at the expense of my estate.
</p>
<p>
15th/ I give & bequeath to my aunts <span class="person" data-person="grace-nathan">Mrs. Grace Nathan</span> and Mrs. <span class="person" data-person="zipphorah-seixas">Zipporah Seixas</span>, both of the City of New York as having always ~~ retained
their kindness & care of me, fifty pounds, New York currency, or one hundred & twenty five dollars each, to paid out of my estate within five years, according to the situation of my estate, but if either or both of my said aunts should die before
the said money is paid them then it is my wish that the sum or sums of money intended for them shall be paid to my heirs.
</p>
<p>
16th/ It is my will and desire that all my just debts shall be paid as soon as possible by my executors, and to fulfill that intention I direct that my slaves <span class="person" data-person="henry">Henry</span> and <span class="person" data-person="daphney">Daphney</span> and so much of my property not specifically bequeathed, be disposed of and sold by my executors, as shall be sufficient for the purpose.
</p>
<p>
17th I give and bequeath all the remainder and residue of my estate that has not already been devised and bequeathed, or that shall not be hereinafter devised and bequeathed, to the following named persons ̌ ̌, their heirs and assigns forever, viz. to
my sister <span class="person" data-person="sarah-de-pass">Sarah De Pass</span> one share or portion - to my sister <span class="person" data-person="grace-marks">Grace Marks</span> for her tender regard and love from a child two shares or portions,
to my sister
<span class="person" data-person="rebecca-seixas">Rebecca Seixas</span> one share or portion - to my brother <span class="person" data-person="manuel-judah">Manuel Judah</span> one share or portion - to my brother <span class="person" data-person="baruch-h-judah">Baruch H. Judah</span> & <span class="person" data-person="manuel-judah">Manuel Judah</span> his son, & <span class="person" data-person="ryne-judah">Ryne Judah</span> his daughter, one share or portion to be equally divided between them - to my broth[er] <span class="person"
data-person="gershom-judah">Gershom Judah</span> & to my sister <span class="person" data-person="rachel-rehine">Rachel Rehine</span>, one share or portion to be equally divided between them - and the eighth and last portion of the same I give and
bequeath to my nephew and namesake <span class="person" data-person="isaac-marks">Isaac Marks</span>, the son of my sister <span class="person" data-person="grace-marks">Grace Marks</span> for him his heirs and assigns forever.
</p>
<p>
17th It is my further will & desire that if any of my heirs or legatees shall in any way whatsoever obstruct my wishes or enter in relation to the said Philip <span class="person" data-person="norborne-wythe">Norborne Wythe</span>, <span class="person"
data-person="benjamin-wythe">Benjamin Wythe</span>, and my slaves <span class="person" data-person="maria">Maria</span> & <span class="person" data-person="betsey">Betsey</span> as herein before expressed, I direct that all and every provision & legacy
herein contained shall be considered as revoked and utterly null and void, as to such person so obstructing my said wishes & his her or their legacies thus forfeited shall be equally divided and distributed amongst the rest of my heirs.
</p>
<p>
18th I do hereby nominate, constitute and appoint by [sic] brother <span class="person" data-person="manuel-judah">Manuel Judah</span>, of the county of Franklin, and my nephew <span class="person" data-person="david-judah">David Judah</span> of the
city of Richmond, executors of this my last will & testament, and I do direct that my said executors shall not be required to give security for the performance of their duties as my executors. Hereby revoking all former wills heretofore made by me
and declaring this to be my true last will & testament written on two sheets of paper. I have hereunto set my hand, and affix my seal, this 16th day of April 1827.
</p>
<p>
<span class="person" data-person="isaac-h-judah">I.H.Judah</span><br>
<br> Signed Sealed published and<br> declared as his last will & testament<br> by <span class="person" data-person="isaac-h-judah">Isaac H. Judah</span>, before us <br> <span class="person" data-person="herbert-a-clairborne">Herbert A Claiborne</span>
<Br> <span class="person" data-person="joseph-longest">Joseph Longest</span><br> <span class="person" data-person="samuel-foster">Samuel Foster</span><br>
<p>
At a Court of Hustings held for the city of Richmond, at the City Hall, on the twenty-sixth day of May 1827. <br> This last will and testament of <span class="person" data-person="isaac-h-judah">Isaac H. Judah</span> deceased, was proved by the
oaths of
<span class="person" data-person="herbert-a-clairborne">Herbert A. Clairborne</span>, <span class="person" data-person="joseph-longest">Joseph Longest</span> & <span class="person" data-person="samuel-foster">Samuel Foster</span> witnesses thereto
and ordered to be recorded and probate granted <span class="person" data-person="david-judah">David Judah</span>, one of the executors therein named, who made oath thereto and entered into & acknowledged a bond in the penalty of twenty thousand
dollars conditioned according to the Act of Assembly passed the 16th day of February 1825 without security (the will directing that none should be required of them.) liberty being reserved to the other executor in the said will named to join in
the said probate when he shall think fit.
</p>
<p>
Teste: Th. C. Howard, Clk.
</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Bilbo+Swash+Caps|La+Belle+Aurore');
body {
margin: 0;
padding: 0;
height: calc(100vh - 10px)
}
#theWill {
max-height: 85vh;
overflow: scroll;
overflow: -moz-scrollbars-vertical;
}
#theWill p {
margin-top: 20px;
}
.plain {
width: 40%;
/* margin: auto;*/
padding: 20px;
font-family: times;
font-size: 1.7em;
background-color: #f9f9ef;
color: #424242;
line-height: 1.1em;
}
.extra-info {
width: 40%;
left: 45%;
display: block;
position: absolute;
padding-top: 15px;
}
.directions {
font-size: 2em;
}
#directions-people{
display: none;
}
.personDetails {
font-size: 1.2em;
}
.extra-info h2 {
font-size: 3em;
font-family: 'La Belle Aurore', cursive;
}
.extra-info p {
font-size: 1.5em;
margin-top: 15px;
}
.extra-info a {
color: #424242;
font-weight: 500;
}
.hidden {
display: none;
}
.menu {
padding: 20px 0 8px 0;
background-color: #424242;
margin: 0;
color: #f9f9ef;
}
.site-title {
font-family: 'La Belle Aurore', cursive;
line-height: 1em;
font-size: 3em;
margin: 0 0 0 30px;
display: inline-block;
}
.tag-line {
margin-left: 160px;
font-size: 1em;
display: inline-block;
display: none;
}
.nav {
display: inline-flex;
margin-left: 30%;
}
.button {
display: inline-block;
border: 1px solid #f9f9ef;
padding: 10px 15px;
font-size: 1.2em;
cursor: pointer;
margin-left: 9px;
}
.button:hover {
background-color: #f9f9ef;
color: #424242;
}
/*PEOPLE*/
.person {
padding-bottom: 0;
cursor: pointer;
}
.isaac-h-judah {
background-color: lightblue;
}
.david-judah {
background-color: lightgreen;
}
.maria {
background-color: pink
}
.betsey {
background-color: yellow;
}
.abigail-de-pass {
background-color: skyblue;
}
.philip-norborne-wythe {
background-color: lightgray;
}
.benjamin-wythe {
background-color: orange;
}
.harry {
background-color: springgreen;
}
.john-goddin {
background-color: salmon;
}
.moses-judah {
background-color: goldenrod;
}
.rachel-judah {
background-color: cyan;
}
.manuel-judah {
background-color: orange;
}
.gershom-judah {
background-color: palegreen;
}
.abigail-judah {
background-color: peachpuff;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
/*Family Tree*/
* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20px; position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 45px;
z-index: -1;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-transform: translateX(1px);
-moz-transform: translateX(1px);
transform: translateX(1px);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: -16px; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 37px;
z-index: -1;
}
.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
background: white;
width:100px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.tree li a+a {
margin-left: 20px;
position: relative;
}
.tree li a+a::before {
content: '';
position: absolute;
border-top: 1px solid #ccc;
top: 50%; left: -21px;
width: 20px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover~ul li a {
background: #95de9f; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover~ul li::after,
.tree li a:hover~ul li::before,
.tree li a:hover~ul::before,
.tree li a:hover~ul ul::before
{
border-color: #94a0b4;
}
.spouse {
margin-left: 190px;
margin-top: 10px;
}
const _people = Array.from(document.querySelectorAll('.person'));
//via http://stackoverflow.com/a/4589863/3390935
document.body.onclick = function(e) {
e = window.event ? event.srcElement : e.target;
if (e.className && e.className.indexOf("person") != -1) {
underPeople();
findPerson = e.dataset.person;
//console.log(findPerson);
if (findPerson == hlPerson(findPerson)) {
findPerson();
}
showDetails(findPerson);
}
if (e.className && e.className.indexOf("button") != -1) {
thePage = e.getAttribute('data-page');
console.log(thePage);
setPages(thePage);
}
};
function underPeople() {
for (var i = 0; i < _people.length; i++) {
border = _people[i].style.borderBottom;
var thePerson = _people[i].dataset.person;
if (border == '3px solid red') {
//people[i].style.borderBottom = 'none';
_people[i].classList.remove(thePerson);
} else {
_people[i].style.borderBottom = '3px solid red';
// people[i].classList.add(thePerson);
}
}
}
function hlPerson(person) {
for (var i = 0; i < _people.length; i++) {
var thePerson = _people[i].dataset.person;
if (thePerson == person) {
_people[i].classList.add(thePerson);
}
}
}
function showDetails(person) {
person = person+'-details';
var details = document.getElementsByClassName(person)[0].innerHTML;
document.getElementById('personDetails').innerHTML = details;
}
function setPages(theSlug) {
var thePage = theSlug+'-details';
var details = document.getElementsByClassName(thePage)[0].innerHTML;
document.getElementById('personDetails').innerHTML = details;
}
$(document).ready(function() {
$.ajax({
url: 'https://rampages.us/judahwill/wp-json/wp/v2/pages?per_page=40',
jsonp: "cb",
dataType: 'json',
success: function(data) {
console.log(data); //dumps the data to the console to check if the callback is made successfully.
$.each(data, function(index, item) {
$('#hiddenDetails').append('<div class="person-details hidden '+ item.slug + '-details"><div class="person-name"><h2>' + item.title.rendered + '</h2></div><div class="full-details">' + item.content.rendered + '</div>');
}); //each
} //success
}); //ajax
}); //ready
//discards
function plainJane() {
var will = document.getElementById("theWill");
var className = will.getAttribute("class");
if (className == "transcription") {
will.setAttribute("class", "plain");
} else {
will.setAttribute("class", "transcription");
}
}
Also see: Tab Triggers