Read more expand text - javascript

Trying to remake this effect where the user clicks 'read more' and the bio expands and they can click 'show less' to display partial bio. I thought maybe it was some javascript to display or hide different sections of html. I ripped part of the html and Javascript I thought created this effect and put it into code.pen.io but it didn't work.. What'd I do wrong?
http://www.nealcommunities.com/about/management-team/
My code pen try : http://codepen.io/danieltaki/pen/VjJbkQ
HTML
<li>
<div class="excerpt RTETextWrapper">
<div>
<p>Pat is a conscientious developer, a master builder and the visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p>
<ul>
<li>Florida State Senate 1978-86</li>
<li>Chairman, Senate Appropriations Committee</li>
<li>Chairman, Committee on Natural Resources</li>
<li>Member, Florida House of Representatives, 1974-78</li>
<li>Chair, Florida Commission on Ethics, 2000-01</li>
<li>Chair, Florida Commission on Ethics, 2002</li>
</ul> Read More...
</div>
</div>
<!-- content -->
<div class="content RTETextWrapper">
<div>
<p>Pat is a conscientious developer, master builder and visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p>
<ul>
<li>Florida State Senate 1978-86</li>
<li>Chairman, Senate Appropriations Committee</li>
<li>Chairman, Committee on Natural Resources</li>
<li>Member, Florida House of Representatives, 1974-78</li>
<li>Chair, Florida Commission on Ethics, 2000-01</li>
<li>Chair, Florida Commission on Ethics, 2002</li>
<li>Sierra Club Legislative Award, 1984</li>
<li>Florida Audubon Society Legislative Award, 1983</li>
<li>Professional Achievement Award, Professional Builder Magazine</li>
<li>Best master Planned Community in the United States (University Park), National Association of Home Builders and Professional Builder Magazine</li>
<li>Hearthstone Builder Public Service Honor Roll, Builder Magazine and Hearthstone Advisors, 2002</li>
<li>Advisory Board, The Trust for Public Land, Florida 2001-2002</li>
<li>Board of Directors, Florida TaxWatch, Inc. 1989, 2000-present</li>
<li>TIGER Award from the Florida Education Association/United 1983</li>
<li>Four-time recipient of the Florida Association of Community Colleges Legislative Service Award</li>
<li>Allen Morris Award for Most Effective Member of the Senate in Committee 1984</li>
<li>Future of the Region Award – Best Community, Tampa Bay Regional Planning Council (University Park)</li>
<li>Ed H. Price Humanitarian Award 2002</li>
<li>John A. Clarke Humanitarian Award 2007</li>
<li>Best Boss, Sarasota Biz941 2007</li>
<li>Community Leadership Award 2008</li>
</ul> ...Read Less
</div>
</div>
<!-- content -->
<div class="clear"></div>
</li>
</div>
</div>
Javascript Code
$(function(){
// expand
$('ul .showMore').click(function(){
var $excerpt = $(this).parent().parent();
$excerpt.hide();
$excerpt.next('.content').show();
return false;
});
$('ul .showLess').click(function(){
var $content = $(this).parent().parent();
$content.hide();
$content.prev('.excerpt').show();
return false;
});
$('ul .showMore').text('read more');
$('ul .showLess').text('read less');
});

You did in fact forget to include jQuery in your CodePen, but additionally, the jQuery that was in place was still not working.
I've learned the hard way that navigating with lots of .parent() calls is not a good way to navigate the DOM.
Here's an Updated CodePen for your reference.
I've only changed two things:
I added the CSS to hide the content by default:
.content.RTETextWrapper {
display: none;
}
I modified your jQuery to use a more reliable method of finding the appropriate elements, using closest and find. And, for fun, I threw in some slideUp and slideDown animation:
// "No-conflict-safe" document ready
jQuery(function($) {
$('a.showMore').click(function() {
// Go UP the DOM and find the closest parent li, THEN find that li's .excerpt element
$(this).closest('li').find('.excerpt').slideUp('fast');
// Go UP the DOM and find the closest parent li, THEN find that li's .content element
$(this).closest('li').find('.content').slideDown('slow');
return false;
});
$('a.showLess').click(function() {
$(this).closest('li').find('.excerpt').slideDown('slow');
$(this).closest('li').find('.content').slideUp('fast');
return false;
});
});

Related

Showing and hiding article elements with JQuery

I am almost done with an exercise but need help with the last bit. The premise is to have only a clicked article to be shown out of a list of four articles. I can hide all but the first article and get the heading to show when the respective article is clicked but I'm having trouble with the code to get the actual article to show. Here is an HTML snippet (let me know if you need more):
$(document).ready(function() {
$("#sorkin").hide();
$("#chua").hide();
$("#sampson").hide();
$("article").hide();
$("h1:first-child").next("article").show();
$("a").click(function(){
id = $(this).attr("href");
if (id != $("article").prev("h1 a").attr("href")) {
$("h1 a").hide();
$("article").hide();
};
$(id).show();
$("id").next("article").show();
});
}); // end ready
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<h1><a id="toobin">The Supreme Nine: Black Robed Secrets</a></h1>
<article>
<img src="images/toobin_court.jpg" alt="Jeffrey Toobin">
<h2>October<br>Jeffrey Toobin</h2>
<p>Author of the critically acclaimed best seller, The Nine: Inside the Secret World of the
Supreme Court, Jeffrey Toobin brings the inside story of one of America's most mysterious
and powerful institutions to the Saroyan stage. At the podium, Toobin is an unbiased, deeply
analytic expert on American law, politics and procedure and he provides a unique look into the
inner workings of the Supreme Court and its influence.</p>
<p>Inside the Secret World of the Supreme Court was published by Doubleday and spent more than
four months on the NY Times best-seller list, earning Toobin the 2008 J. Anthony Lukas Prize
for Nonfiction from the Columbia Graduate School of Journalism. Toobin has also written several
other best-selling books, including A Vast Conspiracy: The Real Story of the Sex Scandal that
Nearly Brought Down a President; The Run of His Life: The People vs. O.J. Simpson; and
Too Close to Call: The 36-Day Battle to Decide the 2000 Election.</p>
<p>Jeffrey Toobin joined CBB from ABC News, where, during his six-year tenure as a legal analyst,
he provided legal views on the nation's most provocative and high profile cases, including the O.J.
Simpson civil trial and the Kenneth Starr investigation of the Clinton White House. Toobin
received a 2001 Emmy Award for his coverage of the Elian Gonzales custody saga.</p>
<p>Toobin is a staff writer at The New Yorker and has been covering legal affairs for the magazine
since 1993. He has written articles on such subjects as Attorney General John Ashcroft, the 2001
dispute over Florida's votes for president, the Paula Jones sexual harassment case, and Supreme
Court Justice Clarence Thomas.</p>
<p>Currently a senior analyst for CNN Worldwide, Toobin is based in the network's New York bureau.
He graduated from Harvard magna cum laude with a Bachelor of Arts degree in 1982 and earned a
Truman scholarship. He is also a 1986 magna cum laude graduate of Harvard Law School, where he
was an editor of the Harvard Law Review.</p>
<p>Back to top</p>
</article>
<h1><a id="sorkin">The Politics of <em>Too Big to Fail</em></a></h1>
<article>
<img src="images/sorkin_desk260.jpg" alt="Andrew Ross Sorkin"/>
<h2>November<br>Andrew Ross Sorkin</h2>
<p><em>New York Times</em> columnist and author, Andrew Ross Sorkin,
has been described as “the most famous financial journalist of his generation.”
A leading voice on Wall Street and corporate America, his <em>New York Times</em> bestseller,
<em>Too Big to Fail: The Inside Story of How Wall Street and Washington Fought to Save
the Financial System—and Themselves</em>, was the first true, behind-the-scenes,
moment-by-moment account of how that financial crisis developed into a global tsunami.</p>
<p><em>The Economist</em>, <em>The Financial Times</em> and <em>Business Week</em> all named
<em>Too Big To Fail</em> one of the best books of the year. The book was published by
Viking October 20, 2009. The book was adapted as a movie by HBO Films and premiered on HBO on
May 23, 2011. The film was directed by Curtis Hanson</p>
<p>and the screenplay was written
by Peter Gould.The cast included William Hurt as Hank Paulson, the Treasury Secretary;
Paul Giamatti as Ben Bernanke, the chairman of the Federal Reserve; Billy Crudup as
Timothy Geithner; and Edward Asner as Warren Buffett.</p>
<p><em>Too Big to Fail</em> won the 2010 Gerald Loeb Award for best business book of the year,
was a finalist for the 2010 <em>Financial Times</em> and Goldman Sachs Business Book of the Year
Award, and was on <em>The New York Times</em> Best Seller list (non-fiction hardcover and paperback)
for six months.</p>
<p>Sorkin is a regular guest host of CNBC’s <em>Squawk Box</em> and appears frequently on MSNBC's
<em>Morning Joe</em>. He has appeared on many other programs, including <em>Meet the Press</em>,
<em>Good Morning America</em>, <em>The Daily Show</em> with Jon Stewart, and <em>Charlie Rose</em>.</p>
<p>Andrew Sorkin graduated from Scarsdale High School in 1995 and earned a Bachelor of Science
degree from Cornell University in 1999. Additional accolades for Andrew Sorkin include winning a
Society of American Business Editors and Writers Award for breaking news in 2005 and again in 2006.
In 2007, the World Economic Forum named him a Young Global Leader.</p>
<p>Back to top</p>
</article>
<h1><a id="chua">Babylon to Beijing: Risks and Rewards of Global Dominance</a></h1>
<article>
<img src="images/chua_220.jpg" alt="Amy Chua" width="145" />
<h2>January<br>Amy Chua</h2>
<p>Amy Chua joined the Yale faculty in 2001 after teaching at Duke Law School.
Prior to starting her teaching career, she was a corporate law associate at Cleary, Gottlieb,
Steen & Hamilton. Her expertise is in international business transactions, law and
development, ethnic conflict, and globalization and the law.</p>
<p>Born in Champaign, Illinois, Amy Chua's parents were ethnic Chinese from the Philippines
before immigrating to the United States. Amy's father, Leon O. Chua, is known as father of
the nonlinear circuit theory and cellular neural networks. Amy Chua graduated magna cum laude
with an A. B. </p>
<p>in Economics from Harvard College in 1984.
She obtained her J. D. cum laude in 1987 from Harvard Law School.</p>
<p>Chua's first book, <em>World on Fire: How Exporting Free Market Democracy Breeds Ethnic
Hatred and Global Instability </em>was a <em>New York Times</em> bestseller, and was selected
by both <em>The Economist</em> and the U. K.'s <em>Guardian</em> as one the the Best Books of
2003. Her second book, <em>Day of Empire: How Hyperpowers Rise to Global Dominance- and Why
They Fall</em>, was a critically acclaimed Foreign Affairs bestseller.</p>
<p>This Yale academic was catapulted into the public spotlight in 2011 with publication of
the<em> NY Times</em> bestseller, <em>Battle Hymn of the Tiger Mother</em>, a memoir
exploring strict parenting the “Chinese Way” as compared to more lenient western
parenting models.</p>
<p>Back to top</p>
</article>
<h1><a id="sampson">Fossil Threads in the Web of Life</a></h1>
<article>
<img src="images/sampson_dinosaur.jpg" alt="Scott Sampson">
<h2>February<br>Scott Sampson</h2>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan,
armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of
Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution
of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
<p>Scott Sampson is a Canadian-born paleontologist who received his Ph.D. in zoology from the
University of Toronto. His doctoral work focused on two new species of ceratopsids, or horned dinosaurs,
from the Late Cretaceous of Montana, as well as the growth and function of certopsid horns and frills.</p>
<p>Following graduation in 1993, Sampson spent a year working at the American Museum of Natual History
in New York City, followed by five years as assistant professor of anatomy at the New York College of
Osteopathic Medicine on Long Island. He arrived at the University of Utah accepting a dual position as
assistant professor in the Department of Geology and Geophysics and curator of vertebrate paleontology
at the Utah Museum of Natural History. His research interests largely revolve around the phylogenetics,
functional morphology, and evolution of Late Cretaceous dinosaurs.</p>
<p>In addition to his museum and laboratory-based studies, Sampson has conducted paleontological work
in Zimbabwe, South Africa, and Madagascar, as well as the United States and Canada. He was also the
on-the-air host for the Discovery Channel's Dinosaur Planet and recently completed a book,
<em>Dinosaur Odyssey: Fossil Threads in the Web of Life</em>, which is one of the most comprehensive
surveys of dinosaurs and their worlds to date.</p>
<p>Back to top</p>
</article>
</section>
<aside>
<h1 id="speakers">This Year's Speakers</h1>
<nav id="nav_list">
<ul>
<li>October<br>Jeffrey Toobin</li>
<li>November<br>Andrew Ross Sorkin</li>
<li>January<br>Amy Chua</li>
<li>February<br>Scott Sampson</li>
</ul>
</nav>
</aside>
Except for the obvious typo on "id", your selector is wrong:
$("id").next("article").show();
Since the id targets the a element inside h1 you have to go up first, for next to select the sibling you seek:
$(id).parent().next("article").show();
You need to split href value then it'll be same with id.
$(document).ready(function() {
$("article").hide();
$("a").on("click", function() {
href = $(this).attr("href");
res = href.replace("#", "");
if(href != res) {
$("h1 a").hide();
$("article").hide();
}
$(href).show();
$(href).parent().next("article").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<h1><a id="toobin">The Supreme Nine: Black Robed Secrets</a></h1>
<article>
<h2>October<br>Jeffrey Toobin</h2>
<p>Author of the critically acclaimed best seller, The Nine: Inside the Secret World of the Supreme Court, Jeffrey Toobin brings the inside story of one of America's most mysterious and powerful institutions to the Saroyan stage. At the podium, Toobin
is an unbiased, deeply analytic expert on American law, politics and procedure and he provides a unique look into the inner workings of the Supreme Court and its influence.</p>
<p>Inside the Secret World of the Supreme Court was published by Doubleday and spent more than four months on the NY Times best-seller list, earning Toobin the 2008 J. Anthony Lukas Prize for Nonfiction from the Columbia Graduate School of Journalism.
Toobin has also written several other best-selling books, including A Vast Conspiracy: The Real Story of the Sex Scandal that Nearly Brought Down a President; The Run of His Life: The People vs. O.J. Simpson; and Too Close to Call: The 36-Day Battle
to Decide the 2000 Election.</p>
<p>Jeffrey Toobin joined CBB from ABC News, where, during his six-year tenure as a legal analyst, he provided legal views on the nation's most provocative and high profile cases, including the O.J. Simpson civil trial and the Kenneth Starr investigation
of the Clinton White House. Toobin received a 2001 Emmy Award for his coverage of the Elian Gonzales custody saga.</p>
<p>Toobin is a staff writer at The New Yorker and has been covering legal affairs for the magazine since 1993. He has written articles on such subjects as Attorney General John Ashcroft, the 2001 dispute over Florida's votes for president, the Paula
Jones sexual harassment case, and Supreme Court Justice Clarence Thomas.</p>
<p>Currently a senior analyst for CNN Worldwide, Toobin is based in the network's New York bureau. He graduated from Harvard magna cum laude with a Bachelor of Arts degree in 1982 and earned a Truman scholarship. He is also a 1986 magna cum laude graduate
of Harvard Law School, where he was an editor of the Harvard Law Review.</p>
<p>Back to top</p>
</article>
<h1><a id="sorkin">The Politics of <em>Too Big to Fail</em></a></h1>
<article>
<h2>November<br>Andrew Ross Sorkin</h2>
<p><em>New York Times</em> columnist and author, Andrew Ross Sorkin, has been described as “the most famous financial journalist of his generation.” A leading voice on Wall Street and corporate America, his <em>New York Times</em> bestseller,
<em>Too Big to Fail: The Inside Story of How Wall Street and Washington Fought to Save
the Financial System—and Themselves</em>, was the first true, behind-the-scenes, moment-by-moment account of how that financial crisis developed into a global tsunami.</p>
<p><em>The Economist</em>, <em>The Financial Times</em> and <em>Business Week</em> all named
<em>Too Big To Fail</em> one of the best books of the year. The book was published by Viking October 20, 2009. The book was adapted as a movie by HBO Films and premiered on HBO on May 23, 2011. The film was directed by Curtis Hanson</p>
<p>and the screenplay was written by Peter Gould.The cast included William Hurt as Hank Paulson, the Treasury Secretary; Paul Giamatti as Ben Bernanke, the chairman of the Federal Reserve; Billy Crudup as Timothy Geithner; and Edward Asner as Warren
Buffett.</p>
<p><em>Too Big to Fail</em> won the 2010 Gerald Loeb Award for best business book of the year, was a finalist for the 2010 <em>Financial Times</em> and Goldman Sachs Business Book of the Year Award, and was on <em>The New York Times</em> Best Seller
list (non-fiction hardcover and paperback) for six months.</p>
<p>Sorkin is a regular guest host of CNBC’s <em>Squawk Box</em> and appears frequently on MSNBC's
<em>Morning Joe</em>. He has appeared on many other programs, including <em>Meet the Press</em>,
<em>Good Morning America</em>, <em>The Daily Show</em> with Jon Stewart, and <em>Charlie Rose</em>.</p>
<p>Andrew Sorkin graduated from Scarsdale High School in 1995 and earned a Bachelor of Science degree from Cornell University in 1999. Additional accolades for Andrew Sorkin include winning a Society of American Business Editors and Writers Award for
breaking news in 2005 and again in 2006. In 2007, the World Economic Forum named him a Young Global Leader.</p>
<p>Back to top</p>
</article>
<h1><a id="chua">Babylon to Beijing: Risks and Rewards of Global Dominance</a></h1>
<article>
<h2>January<br>Amy Chua</h2>
<p>Amy Chua joined the Yale faculty in 2001 after teaching at Duke Law School. Prior to starting her teaching career, she was a corporate law associate at Cleary, Gottlieb, Steen & Hamilton. Her expertise is in international business transactions,
law and development, ethnic conflict, and globalization and the law.</p>
<p>Born in Champaign, Illinois, Amy Chua's parents were ethnic Chinese from the Philippines before immigrating to the United States. Amy's father, Leon O. Chua, is known as father of the nonlinear circuit theory and cellular neural networks. Amy Chua
graduated magna cum laude with an A. B. </p>
<p>in Economics from Harvard College in 1984. She obtained her J. D. cum laude in 1987 from Harvard Law School.</p>
<p>Chua's first book, <em>World on Fire: How Exporting Free Market Democracy Breeds Ethnic
Hatred and Global Instability </em>was a <em>New York Times</em> bestseller, and was selected by both <em>The Economist</em> and the U. K.'s <em>Guardian</em> as one the the Best Books of 2003. Her second book, <em>Day of Empire: How Hyperpowers Rise to Global Dominance- and Why
They Fall</em>, was a critically acclaimed Foreign Affairs bestseller.</p>
<p>This Yale academic was catapulted into the public spotlight in 2011 with publication of the
<em> NY Times</em> bestseller, <em>Battle Hymn of the Tiger Mother</em>, a memoir exploring strict parenting the “Chinese Way” as compared to more lenient western parenting models.</p>
<p>Back to top</p>
</article>
<h1><a id="sampson">Fossil Threads in the Web of Life</a></h1>
<article>
<h2>February<br>Scott Sampson</h2>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research
has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
<p>Scott Sampson is a Canadian-born paleontologist who received his Ph.D. in zoology from the University of Toronto. His doctoral work focused on two new species of ceratopsids, or horned dinosaurs, from the Late Cretaceous of Montana, as well as the
growth and function of certopsid horns and frills.</p>
<p>Following graduation in 1993, Sampson spent a year working at the American Museum of Natual History in New York City, followed by five years as assistant professor of anatomy at the New York College of Osteopathic Medicine on Long Island. He arrived
at the University of Utah accepting a dual position as assistant professor in the Department of Geology and Geophysics and curator of vertebrate paleontology at the Utah Museum of Natural History. His research interests largely revolve around the
phylogenetics, functional morphology, and evolution of Late Cretaceous dinosaurs.</p>
<p>In addition to his museum and laboratory-based studies, Sampson has conducted paleontological work in Zimbabwe, South Africa, and Madagascar, as well as the United States and Canada. He was also the on-the-air host for the Discovery Channel's Dinosaur
Planet and recently completed a book,
<em>Dinosaur Odyssey: Fossil Threads in the Web of Life</em>, which is one of the most comprehensive surveys of dinosaurs and their worlds to date.</p>
<p>Back to top</p>
</article>
</section>
<aside>
<h1 id="speakers">This Year's Speakers</h1>
<nav id="nav_list">
<ul>
<li>October<br>Jeffrey Toobin</li>
<li>November<br>Andrew Ross Sorkin</li>
<li>January<br>Amy Chua</li>
<li>February<br>Scott Sampson</li>
</ul>
</nav>
</aside>

Why does the console say it can't set the property of null

I've been working on a site for school, and for some reason when I attempt to change the link for the source the console outputs
Uncaught TypeError: Cannot set property 'href' of null
at pierre (pierre.html:49)
at HTMLButtonElement.onclick (pierre.html:60)
I attempted to fix this by changing the ids but it also didn't work, even copying and pasting the 'link1' line over the 'link2' line does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="pierre, omidyar, bourne">
<title id="title">Pierre Omidyar</title>
</head>
<script>
var x = 0;
function pierre() {
if (x == 0) {
x = 1
document.getElementById('title').innerHTML='Pierre\xa0Bourne';
document.getElementById('heading').innerHTML='Pierre\xa0Bourne';
document.getElementById('tag').play();
document.getElementById('image1').src='https://cdn3.pitchfork.com/longform/699/Pierre1.jpg';
document.getElementById('cite1').innerHTML = "Sheldon Pearce, Pitchfork.com, 2019";
document.getElementById('para1').innerHTML = "Jordan Timothy Jenks, known professionally as Pi\'erre Bourne, is a Belizean-American record producer, rapper, songwriter, and audio engineer. He is known for producing the singles \"Magnolia\" by Playboi Carti, and \"Gummo\" by 6ix9ine, with the two peaking at number 29 and 12 on the US Billboard Hot 100 respectively.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('image2').src='https://cdn3.pitchfork.com/longform/699/Pierre4.jpg';
document.getElementById('para2').innerHTML = "Songs Pierre Bourne has produced";
document.getElementById('l1o1').innerHTML = "Magnolia";
document.getElementById('l1o2').innerHTML = "wokeuplikethis*";
document.getElementById('l1o3').innerHTML = "Pissy Pamper";
document.getElementById('l1o4').innerHTML = "Pain 1993";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para3').innerHTML = "He was born in Fort Riley, Kansas but grew up in Columbia, South Carolina to a military family from Queens, New York. Growing up, he would spend his summers with his grandmother in Queens, which lead to his interest in East Coast hip hop artists such as Dipset and G-Unit. He is related to Mobile Malachi, a Belizean Kriol Reggae artist and musician. He is also a cousin of Papoose, who is of Liberian descent."
document.getElementById('para4').innerHTML = "Jenks began producing for Young Nudy and Trippie Redd in 2016. He met Playboi Carti in February 2017, collaborating on the track \"Woke Up Like This\" and producing most tracks on his debut project. Their song \"Magnolia\" peaked at 29 on the US Billboard Hot 100. This kickstarted Jenks' producing career, producing songs for 21 Savage, Trippie Redd, Rich the Kid, Lil Yachty, Famous Dex, Nav, Young Thug and Lil Uzi Vert. Jenks has also released a series of mixtapes called The Life of Pi'erre and has his own imprint, SossHouse, at Interscope Records. He produced Travis Scott's single \"Watch\" which features Kanye West and Lil Uzi Vert. He also produced Playboi Carti's album Die Lit. He also helped produce for Kanye West's albums Ye and Jesus Is King.";
document.getElementById("link3").href = "https://en.wikipedia.org/wiki/Pierre_Bourne";
document.getElementById('para5').innerHTML = "Pierre Bourne has been hooked on the anime show Bleach since a two-week beat-making excursion to Tokyo earlier in the month. “'Bleach' is kind of accurate to how it looks over there [in Japan]. It reminds me of the neighborhoods I was walking through. So, that’s why I’ve been watching that a lot. Like, a lot a lot.”";
document.getElementById("link4").href = "https://www.highsnobiety.com/p/pierre-bourne-interview";
}
else {
x = 0
document.getElementById('title').innerHTML='Pierre\xa0Omidyar';
document.getElementById('heading').innerHTML='Pierre\xa0Omidyar';
document.getElementById('tag').pause();
document.getElementById('image1').src='https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg';
document.getElementById('cite1').innerHTML = "JD Lasica, Flickr.com, 2005";
document.getElementById('para1').innerHTML="Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.";
document.getElementById('link1').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar"
document.getElementById('image2').src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg';
document.getElementById('para2').innerHTML = "Companies Pierre Omidyar has Founded";
document.getElementById('l1o1').innerHTML = "eBay";
document.getElementById('l1o2').innerHTML = "First Look Media";
document.getElementById('l1o3').innerHTML = "Honolulu Civil Beat";
document.getElementById('l1o4').innerHTML = "Omidyar Network";
document.getElementById('para3').innerHTML = "Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.";
document.getElementById('link2').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para4').innerHTML = "In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.";
document.getElementById('link3').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
document.getElementById('para5').innerHTML = "Omidyar has been part of the executive producer team for the films \"Merchants of Doubt\" (2014) and \"Spotlight\" (2015)"
document.getElementById('link4').href = "https://en.wikipedia.org/wiki/Pierre_Omidyar";
}
}
</script>
<body>
<audio id="tag"><source src="https://codehs.com/uploads/9af74ff56cf4b8ed3809fba276efa59e" type="audio/mpeg"></audio>
<h1 id="heading">Pierre Omidyar</h1>
<button onclick="pierre()" type="button"><em>Swap!</em></button><br>
<img height=50% width=50% id="image1" src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Pierre_Omidyar_%2850911249%29.jpg"/><br>
<cite id="cite1">JD Lasica, Flickr.com, 2005</cite><br>
<span id="para1">Pierre Morad Omidyar is an American billionaire entrepreneur, software engineer and philanthropist. He is the founder of eBay where he served as chairman from 1998 to 2015. He became a billionaire at the age of 31 with eBay's 1998 initial public offering (IPO).Omidyar and his wife Pamela are philanthropists who founded Omidyar Network in 2004 in order to expand their efforts beyond non-profits to include for-profits and public policy.</span><br>
<a id="link1" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>What has Pierre done?</h1>
<img height=50% width=50% id="image2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Pomidyarji.jpg/800px-Pomidyarji.jpg"/><br>
<span id="para2">Companies Pierre Omidyar has Founded</span>
<ul>
<li id="l1o1">eBay</li>
<li id="l1o2">First Look Media</li>
<li id="l1o3">Honolulu Civil Beat</li>
<li id="l1o4">Omidyar Network</li>
</ul>
<hr>
<h1>Family Info</h1>
<p id="para3">Omidyar was born in Paris, the son of Iranian parents who migrated to France for higher education. He was given the name of Parviz. His father, Cyrus Omidyar, is a surgeon who worked as a urologist at Johns Hopkins University in Baltimore and now practices in Aliso Viejo, California. Due to his father's work, the family moved to the US when Omidyar was a child. His mother, who did her doctorate in linguistics at the Sorbonne, is an academic.</span><br>
<a id="link2" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a><br>
<hr>
<h1>Professional Info</h1>
<p id="para4">In 1991, he co-founded Ink Development, a pen-based computing startup that later was rebranded as an e-commerce company and was renamed eShop Inc. Microsoft acquired eShop on June 11, 1996, for less than $50 million and Omidyar earned $1 million from the deal. In 1995, at the age of 28, Omidyar began to write the original computer code for an online venue to enable the listing of a direct person-to-person auction for collectible items. He created a simple prototype on his personal web page, and on Labor Day, Monday, September 4, 1995, he launched an online service called Auction Web, which would eventually become the auction site eBay. In 2013, prompted by the Edward Snowden leaks, Omidyar announced the creation of First Look Media, a journalism venture launched on February 10, 2014, with The Intercept and including such journalists as Glenn Greenwald, Laura Poitras, Jeremy Scahill, Dan Froomkin, John Temple, and Jay Rosen.</span><br>
<a id="link3" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
<h1>Hobby Info</h1>
<p id="para5">Omidyar has been part of the executive producer team for the films "Merchants of Doubt" (2014) and "Spotlight" (2015)</span><br>
<a id="link4" href="https://en.wikipedia.org/wiki/Pierre_Omidyar"><b>Source</b></a>
<hr>
</body>
</html>
It looks like the problem was mismatching the start and end span/p tags for the para information.
HTML with mismatched opening and closing tags causes the javascript DOM parser to miss elements despite them actually being on the page.

Method skips an item when appending to html

I have written a class with methods to extract and process text from html. The html file contains three articles. Each in a 'text' tag. The 'getArticles' method extracts all the text elements and creates an object. Then, the 'getTexts' method is supposed to take the text from the object and render it to html. BUT it just keeps skipping the text from the article in the middle, starting with 'Set in Australia...'. I have tried to remove another article from the html and then the missing article appeared, but it just wont include all three articles together. Help?
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = document.getElementsByTagName("text");
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
const keys = Object.keys(this.articles);
console.log(keys);
keys.forEach(key => {
console.log(this.articles[key])
out.appendChild(this.articles[key])
})
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.showArticles();
analysis.getTexts(DOM.output1);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<doc>
<docno> LA010189-0001 </docno>
<docid> 1 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 1; Book Review Desk
</p>
</section>
<length>
<p>
1206 words
</p>
</length>
<headline>
<p>
NEW FALLOUT FROM CHERNOBYL;
</p>
<p>
THE SOCIAL IMPACT OF THE CHERNOBYL DISASTER BY DAVID R. MARPLES (ST. MARTIN'S
PRESS: $35, CLOTH; $14.95, PAPER; 316 PP., ILLUSTRATED; 0-312-02432-0)
</p>
</headline>
<byline>
<p>
By James E. Oberg , Oberg, a space engineer in Houston, is the author of
Uncovering Soviet Disasters: Exploring the Limits of Glasnost (Random House).
</p>
</byline>
<text>
<p>
The onset of the new Gorbachev policy of glasnost, commonly mistranslated as
openness but closer in connotation to candor or publicizing, has complicated
the task of Soviet secret-keepers and has allowed substantial new Western
insights into Soviet society. David R. Marples' new book, his second on the
Chernobyl accident of April 26, 1986, is a shining example of the best type of
non-Soviet analysis into topics that only recently were absolutely taboo in
Moscow official circles.
</p>
<p>
The author, a British-educated historian and economist, is a research associate
with the Canadian Institute of Ukrainian Studies at the University of Alberta,
and the academic style of the book is undisguised. However, its intended
audience is the general public, and anyone interested in nuclear power, or
Soviet economy and society, or human drama, or just plain sleuthing state
secrets, will find hitherto unpublished revelations and explanations of the
event and its continuing aftermath.
</p>
<p>
The effects of Chernobyl reverberated throughout so many facets of Soviet
society that a continuous coherent narrative is probably impossible. Marples
discusses half a dozen major themes arranged in a fairly arbitrary order (as
indicated by the frequent and helpful cross references throughout the text) and
succeeds in mapping out his main themes. The personal interests of each reader
determine which of the sections may be deemed too detailed and which too
sketchy, but considering the need for such a comprehensive overview, the levels
are generally appropriate.
</p>
<p>
The book is, on the one hand, not a light read, and an executive summary might
have been possible in a quarter the length. But, on the other, so many of the
judgments depend on a subtle interpretation of a multitude of sources that the
author is obligated to present the raw data for the reader's inspection. The
modular nature of the book also allows a reader to skip, browse, and revisit
earlier sections, aided by a convenient internal organization and a thorough
index.
</p>
<p>
First in the world's attention, and in the text, is a discussion of the human
victims of the accident. The official tally is 31 (only about 20 names have
ever been released), but Marples suspects there were other short-term radiation
victims. A large number of unnecessary late-term abortions were also performed
on local women, and by rights those unborn babies count as casualties.
Widespread "radiophobia" led to restricted diets which created malnourishment
and subsequent disease in thousands of people. The tens of thousands of people
taking part in cleanup operations were never included in official totals of
those exposed. Since the book went to press, Soviet military sources have
referred to at least one death in the actual reactor entombment program.
</p>
<p>
But the greatest toll is likely to occur with the delayed deaths. Here, Marples
encounters for the first time the soon familiar theme of official Soviet
myth-making around the event: Reality is twisted to serve state policy
objectives, which include calming an alarmed public with assurances that all is
well when it isn't.
</p>
<p>
And thus is born what he properly labels the "myth of Chernobyl," the official
line that the disaster provided a test that Soviet society passed with honor.
"In the Soviet view," he writes, "it was first and foremost a victory, a story
with an ending, and an ending that was triumphant."
</p>
<p>
Thus, when sober Western medical estimates placed the future "excess cancer
deaths" at several tens of thousands, both in the Soviet Union and in Europe (a
few tenths of a percent elevation of the natural cancer rate), the Soviets
reacted furiously. The estimates are branded "nonsense" and the estimators are
dismissed as "panic mongers" promulgating "anti-Soviet venom."
</p>
<p>
Subsequently the author addresses themes of environmental impact, economic and
political repercussions, public images, and the recovery operations. Along the
way, Marples provides a damning list of examples in which Soviet officials
attempted to retreat behind old-style cover-ups and outright lies. False
information was issued on radiation levels, on subsequent accidents at the
site, on contamination levels of the Kiev water supply, on severe discipline
against non-volunteer cleanup personnel, on reactor entombment schedules and on
operator training levels.
</p>
<p>
A severe 1986-1987 countrywide electrical power shortage was officially denied
although it was real enough to compel the restart of three Chernobyl reactors
in explicit violation of Soviet safety regulations. Design deficiencies of the
Chernobyl-style reactors were downplayed and human errors were declared to be
the primary culprit.
</p>
<p>
Ultimately, observes the author, "It is ironic that in an era of openness,
Chernobyl may have been both the pioneer of glasnost under Gorbachev and then
subsequently its first casualty." He ultimately concludes, "Aspects of the
disaster . . . have rarely been dealt with thoroughly or even honestly by
Soviet sources." Hence the need for this book, a need which is admirably
fulfilled despite the many remaining mysteries and uncertainties.
</p>
<p>
The July, 1987, trial of reactor personnel marked a full circle of disclosure.
Journalists were allowed into the pre-scripted first and last days, but the
weeklong deliberative sessions were held in secret and no word of their
substance has ever been released.
</p>
<p>
The propaganda purpose of the trial and surrounding official publicity, he
maintains, had one goal: "To divert culpability from the party hierarchy, in
Kiev and especially in Moscow." This is precisely the theme I have also
encountered in my own investigations of aerospace accidents of the past. Where
individual human failings led to catastrophe, a sanitized story may eventually
be released, but where Kremlin policy led to disaster (such as the Nedelin
catastrophe of 1960 or the Soyuz-1 disaster in 1967), the entire event remains
absolutely off limits to glasnost.
</p>
<p>
The closing blow-by-blow description of the nuclear power debate presages a
dramatic event which occurred too recently for inclusion in this first edition.
Viktor Legasov, tagged by the author as one of the country's two leading
pro-nuclear advocates, actually was sinking into private despair over the poor
implementation of safety standards. In the end, he made his final and most
eloquent testimony to this despair on the second anniversary of the accident,
by committing suicide. For several weeks the Soviets tried to sit on the
circumstances of his "tragic death," even issuing official non-explanations
which asserted that the death was not due to medical effects of radiation.
Finally, crusading journalist Vladimir Gubarev, with access to Legasov's
notebooks, broke the story in Pravda. Readers of this book will come to know
these and other characters so well that the suicide fits right into the "big
picture" of the catastrophe's social impacts.
</p>
<p>
For an author to so accurately describe a social milieu that subsequent
unpredictable events only enhance his insights is testimony to the highest
quality of scholarship. Readers of Marples' book will rarely be surprised as
the Chernobyl catastrophe's consequences continue to unfold in the future.
</p>
</text>
<graphic>
<p>
Photo, Chernobyl Then and Now :Photographs of the damaged reactor taken before
the construction of its concrete "sarcophagus" are, for obvious reasons, aerial
photographs. Left, an artist's reconstruction of the reactor as it would have
looked from the ground before the sarcophagus was in place. The point of view
is the same as that of an official Soviet photograph, right, taken as the
entombment neared completion.
</p>
</graphic>
<type>
<p>
Book Review; Main Story
</p>
</type>
</doc>
<doc>
<docno> LA010189-0013 </docno>
<docid> 31 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 10; Book Review Desk
</p>
</section>
<length>
<p>
146 words
</p>
</length>
<headline>
<p>
CURRENT PAPERBACKS: WAITING FOR CHILDHOOD BY SUMNER LOCKE ELLIOTT (PERENNIAL
LIBRARY/ HARPER & ROW: $7.95)
</p>
</headline>
<byline>
<p>
By ELENA BRUNET
</p>
</byline>
<text>
<p>
Set in Australia at the turn of the 20th Century, "Waiting for Childhood" is
the story of seven children left to cope for themselves after their parents
die. Their father, The Rev. William Lord, expires at the breakfast table one
morning. After the family leaves for a ramshackle house owned by a wealthy
cousin, the mother loses her mind and then her life in an accident.
</p>
<p>
The eldest daughter, Lily, takes charge of the entire household, as Jess
becomes a favorite of her rich cousin Jackie and watches her rival for Jackie's
affections fall fatally from a mountaintop.
</p>
<p>
These characters, "all talented, all deeply human, (are) all so beautifully
realized that by the end of the novel we identify with them to the point of
heartbreak," Carolyn See wrote in these pages. " 'Waiting for Childhood'
manages to be at once terribly melancholy and extraordinarily exhilarating."
</p>
</text>
<type>
<p>
Column; Book Review
</p>
</type>
</doc>
<doc>
<docno> LA010189-0032 </docno>
<docid> 74 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Business; Part 4; Page 3; Column 1; Financial Desk
</p>
</section>
<length>
<p>
1299 words
</p>
</length>
<headline>
<p>
VIEWPOINTS;
</p>
<p>
'89 WISH LIST: PROTECTION, TAXES AND PEACE;
</p>
<p>
SOCIAL BENEFITS, DEFICIT REDUCTION ARE TOP PRIORITIES FOR THE NEW YEAR
</p>
</headline>
<text>
<p>
What changes would you like to see in business practices and the workplace this
year? How can business leaders and economic policy-makers improve the economy
and the world in general in 1989? The Times ran these questions by people in
various walks of life, and here are some of their answers:
</p>
<p>
</p>
<p>
Muriel Siebert, head of the Muriel Siebert & Co. discount brokerage in New
York, and first female member of the New York Stock Exchange:
</p>
<p>
"I would like to see certain business practices regulated. I think that the
leveraged buyouts show the greed of people at their worst. . . . The LBOs are
bypassing the purpose of the capital-raising system. I think that to the extent
that people were stockholders in these companies . . . they should be allowed
to continue to have some kind of share in the profits (after the leveraged
buyouts) because these moves were done while they were stockholders.
</p>
<p>
"Must greed be the creed? I would like to see that also rolled over to our
defense contractors. I am pro defense. I believe in a strong country because
people mistake gentility for weakness. If (contractors) cheat on defense
contracts, I don't see why they don't go to jail. . . . I just feel that if you
are a major defense contractor, you owe a fiduciary responsibility to this
country because defense expenditures are putting a pretty big toll on the
country."
</p>
<p>
Andrew Brimmer, former member of the Federal Reserve Board and head of a
Washington economics consulting firm:
</p>
<p>
"My leading wish is that the nation deal with the federal budget deficit. I
would like to see a substantial reduction in 1989 and extending over the next
three years. I would strongly recommend that we raise taxes. There should be
some moderation in the level of government expenditures, but the real problem
is the lag in revenue.
</p>
<p>
"I also would like to see more done for education by business. The kind of
education I'm talking about is at the elementary and secondary level.
Businesses are already contributing to colleges. Businesses should do likewise
for elementary and secondary schools. Business people can play a role as
counselors and teachers. A firm might make available an engineer or
mathematician to go into schools and teach. Business should do more to offer
on-the-job training for unskilled, or limited-skills, people, perhaps through a
(lower) learning wage. We would give business tax credits to do this."
</p>
<p>
William R. Robertson, executive secretary of the Los Angeles County Federation
of Labor, AFL-CIO:
</p>
<p>
"I would like to see a change in philosophy by the incoming President relating
to labor relations and providing for fairness in our (labor) organizing efforts
and contract negotiations. . . .
</p>
<p>
"I would also like to see some protection for workers losing their jobs because
of mergers. It is a national disgrace. In too many mergers, the workers are the
ones that suffer and the country as well. Something should be done to correct
it. . . .
</p>
<p>
"And, finally, this Administration should face reality in resolving the
astronomical deficit."
</p>
<p>
Steven D. Lydenberg, an associate with the "socially responsible" investment
firm of Franklin Research & Development:
</p>
<p>
"There is an increasing interest around the country in social investing. People
want to know not just the financial implications of making a commitment in a
company, but also the social implication. That information is not very easy to
come by.
</p>
<p>
"So, if at the end of '89 corporations were disclosing in a uniform way their
yield figures, their charitable contribution figures, the numbers of women and
minorities in top management and board directors, their attitude on a number of
comparable social issues, I would be very happy."
</p>
<p>
Frank Borman, chairman of Patlex Corp. of Chatsworth, former astronaut and
former chairman of Eastern Airlines:
</p>
<p>
"We should begin to move toward taxing consumption -- a value-added tax. This
is quite controversial as Al Ullman (Oregon Democrat and former chairman of the
House Ways and Means Committee, who was defeated in 1988 after advocating a
value-added tax) will tell you. But this taxing system is needed. It would
certainly help our exports. Almost all of Europe is under the value-added
taxing system. Also, it may encourage saving instead of consumption. One of the
ways you discourage consumption is to tax it."
</p>
<p>
Michael Harrington, co-chair of Democratic Socialists of America and author of
"The Other America" and "The New American Poverty":
</p>
<p>
"I hope Secretary of State Baker will build on the basic insights of former
Treasury Secretary Baker (James Baker, former treasury secretary, was nominated
by President-elect Bush to be Secretary of State) that a settlement of Third
World debt is in the self-interest of America, opening up markets for business
and labor. But then the new Baker will have to go far beyond the old, since
Latin America now owes more than it did in 1982 when the crisis officially
began, and several countries, including Argentina and Brazil, may see democracy
subverted if current trends persist.
</p>
<p>
"At home, the nation must recognize that we can't waste young people, and
particularly minorities and women, on illiteracy, unemployment and unproductive
low-wage work. We must invest mightily in education, training and job
generation."
</p>
<p>
Alan Bromberg, a securities law expert and professor at Southern Methodist
University:
</p>
<p>
"There are several things I would like most to see changed in the economy and
business practices. One, more concentration by business and government, both
here and abroad, on . . . the facilitation of international trade and
investment. This would require wider horizons for business people . . . and
more effort by government to reduce and ultimately eliminate all kinds of
restrictions on the movement of products.
</p>
<p>
"Two, I would like to see a national consensus developed, preferably in the
form of federal legislation, on corporate takeovers and buyouts that would
recognize the efficiencies and benefits they bring as well as the dislocations
and hardships they can cause. This would involve tax policies and labor polices
and limitations on the ability of states to Balkanize corporate law by
different anti-takeover statutes everywhere. (There also should be) some kind
of limitation on management self-entrenchment and self-enrichment.
</p>
<p>
"I think we could use a lot of clarification of the securities laws. I think
the courts have done a good job of saying what insider trading is. The kind of
issues that are most difficult are what really is parking (of stock)? How much
cooperation or similar action by different individuals or different groups of
individuals makes it collaboration? These issues haven't been well resolved. .
. .
</p>
<p>
Peter Bahouth, executive director of Greenpeace in Washington:
</p>
<p>
"People now view threats to human security less in terms of political threats
and more in environmental and economic terms. So for my wish list, I would ask
first that we deal with the issue of the greenhouse effect. We better develop
some alternative views in mass transportation and cut subsidies to reflect the
true cost of fossil fuels in terms of pollution, along with the actual economic
cost of development. Then, we could put more money into research and
development of wind and solar energy.
</p>
<p>
"(Also on my wish list is) peace on earth. If we want peace on earth, we have
to start looking seriously at the fact that we are making more and more
weapons, and in a process which endangers the health of American people. . . .
Production plants have been proven to have released into the air and water
radioactivity and toxic chemicals."
</p>
<p>
"Also, it would be nice if we could learn that the rain forest affects all of
us. We need to preserve it. And we would like the tuna industry to stop killing
dolphins."
</p>
</text>
<graphic>
<p>
Drawing, JILL BANASHEK / for The Times
</p>
</graphic>
</doc>
</section>
<section>
<h2>Raw Text</h2>
<div class="output1">
</div>
</section>
<script src="app.js"></script>
</body>
</html>
It happens because the order of this.articles is changing every time you use appendChild because this.articles is not an array but an HTML Collection.
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = document.getElementsByTagName("text");
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
for (let i = 0; i < 5; i++) {
console.log(this.articles)
out.appendChild(this.articles[i])
}
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.getTexts(DOM.output1);
body {
background: white
}
<text>article 0</text>
<text>article 1</text>
<text>article 2</text>
<text>article 3</text>
<text>article 4</text>
<h2>Raw Text</h2>
<div class="output1">
</div>
You can solve this by create an array from html collection (i.e. change this line):
getArticles = (out) => {
this.articles = [...document.getElementsByTagName("text")];
}
DOM = {
output1: document.querySelector('.output1')
};
class TextAnalyzer {
getArticles = (out) => {
this.articles = [...document.getElementsByTagName("text")];
}
getText = (key) => {
return this.articles[key];
}
getTexts = (out) => {
const keys = Object.keys(this.articles);
console.log(keys);
keys.forEach(key => {
console.log(this.articles[key])
out.appendChild(this.articles[key])
})
}
showArticles = () => console.log(this.articles);
}
const analysis = new TextAnalyzer();
analysis.getArticles();
analysis.showArticles();
analysis.getTexts(DOM.output1);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<doc>
<docno> LA010189-0001 </docno>
<docid> 1 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 1; Book Review Desk
</p>
</section>
<length>
<p>
1206 words
</p>
</length>
<headline>
<p>
NEW FALLOUT FROM CHERNOBYL;
</p>
<p>
THE SOCIAL IMPACT OF THE CHERNOBYL DISASTER BY DAVID R. MARPLES (ST. MARTIN'S
PRESS: $35, CLOTH; $14.95, PAPER; 316 PP., ILLUSTRATED; 0-312-02432-0)
</p>
</headline>
<byline>
<p>
By James E. Oberg , Oberg, a space engineer in Houston, is the author of
Uncovering Soviet Disasters: Exploring the Limits of Glasnost (Random House).
</p>
</byline>
<text>
<p>
The onset of the new Gorbachev policy of glasnost, commonly mistranslated as
openness but closer in connotation to candor or publicizing, has complicated
the task of Soviet secret-keepers and has allowed substantial new Western
insights into Soviet society. David R. Marples' new book, his second on the
Chernobyl accident of April 26, 1986, is a shining example of the best type of
non-Soviet analysis into topics that only recently were absolutely taboo in
Moscow official circles.
</p>
<p>
The author, a British-educated historian and economist, is a research associate
with the Canadian Institute of Ukrainian Studies at the University of Alberta,
and the academic style of the book is undisguised. However, its intended
audience is the general public, and anyone interested in nuclear power, or
Soviet economy and society, or human drama, or just plain sleuthing state
secrets, will find hitherto unpublished revelations and explanations of the
event and its continuing aftermath.
</p>
<p>
The effects of Chernobyl reverberated throughout so many facets of Soviet
society that a continuous coherent narrative is probably impossible. Marples
discusses half a dozen major themes arranged in a fairly arbitrary order (as
indicated by the frequent and helpful cross references throughout the text) and
succeeds in mapping out his main themes. The personal interests of each reader
determine which of the sections may be deemed too detailed and which too
sketchy, but considering the need for such a comprehensive overview, the levels
are generally appropriate.
</p>
<p>
The book is, on the one hand, not a light read, and an executive summary might
have been possible in a quarter the length. But, on the other, so many of the
judgments depend on a subtle interpretation of a multitude of sources that the
author is obligated to present the raw data for the reader's inspection. The
modular nature of the book also allows a reader to skip, browse, and revisit
earlier sections, aided by a convenient internal organization and a thorough
index.
</p>
<p>
First in the world's attention, and in the text, is a discussion of the human
victims of the accident. The official tally is 31 (only about 20 names have
ever been released), but Marples suspects there were other short-term radiation
victims. A large number of unnecessary late-term abortions were also performed
on local women, and by rights those unborn babies count as casualties.
Widespread "radiophobia" led to restricted diets which created malnourishment
and subsequent disease in thousands of people. The tens of thousands of people
taking part in cleanup operations were never included in official totals of
those exposed. Since the book went to press, Soviet military sources have
referred to at least one death in the actual reactor entombment program.
</p>
<p>
But the greatest toll is likely to occur with the delayed deaths. Here, Marples
encounters for the first time the soon familiar theme of official Soviet
myth-making around the event: Reality is twisted to serve state policy
objectives, which include calming an alarmed public with assurances that all is
well when it isn't.
</p>
<p>
And thus is born what he properly labels the "myth of Chernobyl," the official
line that the disaster provided a test that Soviet society passed with honor.
"In the Soviet view," he writes, "it was first and foremost a victory, a story
with an ending, and an ending that was triumphant."
</p>
<p>
Thus, when sober Western medical estimates placed the future "excess cancer
deaths" at several tens of thousands, both in the Soviet Union and in Europe (a
few tenths of a percent elevation of the natural cancer rate), the Soviets
reacted furiously. The estimates are branded "nonsense" and the estimators are
dismissed as "panic mongers" promulgating "anti-Soviet venom."
</p>
<p>
Subsequently the author addresses themes of environmental impact, economic and
political repercussions, public images, and the recovery operations. Along the
way, Marples provides a damning list of examples in which Soviet officials
attempted to retreat behind old-style cover-ups and outright lies. False
information was issued on radiation levels, on subsequent accidents at the
site, on contamination levels of the Kiev water supply, on severe discipline
against non-volunteer cleanup personnel, on reactor entombment schedules and on
operator training levels.
</p>
<p>
A severe 1986-1987 countrywide electrical power shortage was officially denied
although it was real enough to compel the restart of three Chernobyl reactors
in explicit violation of Soviet safety regulations. Design deficiencies of the
Chernobyl-style reactors were downplayed and human errors were declared to be
the primary culprit.
</p>
<p>
Ultimately, observes the author, "It is ironic that in an era of openness,
Chernobyl may have been both the pioneer of glasnost under Gorbachev and then
subsequently its first casualty." He ultimately concludes, "Aspects of the
disaster . . . have rarely been dealt with thoroughly or even honestly by
Soviet sources." Hence the need for this book, a need which is admirably
fulfilled despite the many remaining mysteries and uncertainties.
</p>
<p>
The July, 1987, trial of reactor personnel marked a full circle of disclosure.
Journalists were allowed into the pre-scripted first and last days, but the
weeklong deliberative sessions were held in secret and no word of their
substance has ever been released.
</p>
<p>
The propaganda purpose of the trial and surrounding official publicity, he
maintains, had one goal: "To divert culpability from the party hierarchy, in
Kiev and especially in Moscow." This is precisely the theme I have also
encountered in my own investigations of aerospace accidents of the past. Where
individual human failings led to catastrophe, a sanitized story may eventually
be released, but where Kremlin policy led to disaster (such as the Nedelin
catastrophe of 1960 or the Soyuz-1 disaster in 1967), the entire event remains
absolutely off limits to glasnost.
</p>
<p>
The closing blow-by-blow description of the nuclear power debate presages a
dramatic event which occurred too recently for inclusion in this first edition.
Viktor Legasov, tagged by the author as one of the country's two leading
pro-nuclear advocates, actually was sinking into private despair over the poor
implementation of safety standards. In the end, he made his final and most
eloquent testimony to this despair on the second anniversary of the accident,
by committing suicide. For several weeks the Soviets tried to sit on the
circumstances of his "tragic death," even issuing official non-explanations
which asserted that the death was not due to medical effects of radiation.
Finally, crusading journalist Vladimir Gubarev, with access to Legasov's
notebooks, broke the story in Pravda. Readers of this book will come to know
these and other characters so well that the suicide fits right into the "big
picture" of the catastrophe's social impacts.
</p>
<p>
For an author to so accurately describe a social milieu that subsequent
unpredictable events only enhance his insights is testimony to the highest
quality of scholarship. Readers of Marples' book will rarely be surprised as
the Chernobyl catastrophe's consequences continue to unfold in the future.
</p>
</text>
<graphic>
<p>
Photo, Chernobyl Then and Now :Photographs of the damaged reactor taken before
the construction of its concrete "sarcophagus" are, for obvious reasons, aerial
photographs. Left, an artist's reconstruction of the reactor as it would have
looked from the ground before the sarcophagus was in place. The point of view
is the same as that of an official Soviet photograph, right, taken as the
entombment neared completion.
</p>
</graphic>
<type>
<p>
Book Review; Main Story
</p>
</type>
</doc>
<doc>
<docno> LA010189-0013 </docno>
<docid> 31 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Book Review; Page 10; Book Review Desk
</p>
</section>
<length>
<p>
146 words
</p>
</length>
<headline>
<p>
CURRENT PAPERBACKS: WAITING FOR CHILDHOOD BY SUMNER LOCKE ELLIOTT (PERENNIAL
LIBRARY/ HARPER & ROW: $7.95)
</p>
</headline>
<byline>
<p>
By ELENA BRUNET
</p>
</byline>
<text>
<p>
Set in Australia at the turn of the 20th Century, "Waiting for Childhood" is
the story of seven children left to cope for themselves after their parents
die. Their father, The Rev. William Lord, expires at the breakfast table one
morning. After the family leaves for a ramshackle house owned by a wealthy
cousin, the mother loses her mind and then her life in an accident.
</p>
<p>
The eldest daughter, Lily, takes charge of the entire household, as Jess
becomes a favorite of her rich cousin Jackie and watches her rival for Jackie's
affections fall fatally from a mountaintop.
</p>
<p>
These characters, "all talented, all deeply human, (are) all so beautifully
realized that by the end of the novel we identify with them to the point of
heartbreak," Carolyn See wrote in these pages. " 'Waiting for Childhood'
manages to be at once terribly melancholy and extraordinarily exhilarating."
</p>
</text>
<type>
<p>
Column; Book Review
</p>
</type>
</doc>
<doc>
<docno> LA010189-0032 </docno>
<docid> 74 </docid>
<date>
<p>
January 1, 1989, Sunday, Home Edition
</p>
</date>
<section>
<p>
Business; Part 4; Page 3; Column 1; Financial Desk
</p>
</section>
<length>
<p>
1299 words
</p>
</length>
<headline>
<p>
VIEWPOINTS;
</p>
<p>
'89 WISH LIST: PROTECTION, TAXES AND PEACE;
</p>
<p>
SOCIAL BENEFITS, DEFICIT REDUCTION ARE TOP PRIORITIES FOR THE NEW YEAR
</p>
</headline>
<text>
<p>
What changes would you like to see in business practices and the workplace this
year? How can business leaders and economic policy-makers improve the economy
and the world in general in 1989? The Times ran these questions by people in
various walks of life, and here are some of their answers:
</p>
<p>
</p>
<p>
Muriel Siebert, head of the Muriel Siebert & Co. discount brokerage in New
York, and first female member of the New York Stock Exchange:
</p>
<p>
"I would like to see certain business practices regulated. I think that the
leveraged buyouts show the greed of people at their worst. . . . The LBOs are
bypassing the purpose of the capital-raising system. I think that to the extent
that people were stockholders in these companies . . . they should be allowed
to continue to have some kind of share in the profits (after the leveraged
buyouts) because these moves were done while they were stockholders.
</p>
<p>
"Must greed be the creed? I would like to see that also rolled over to our
defense contractors. I am pro defense. I believe in a strong country because
people mistake gentility for weakness. If (contractors) cheat on defense
contracts, I don't see why they don't go to jail. . . . I just feel that if you
are a major defense contractor, you owe a fiduciary responsibility to this
country because defense expenditures are putting a pretty big toll on the
country."
</p>
<p>
Andrew Brimmer, former member of the Federal Reserve Board and head of a
Washington economics consulting firm:
</p>
<p>
"My leading wish is that the nation deal with the federal budget deficit. I
would like to see a substantial reduction in 1989 and extending over the next
three years. I would strongly recommend that we raise taxes. There should be
some moderation in the level of government expenditures, but the real problem
is the lag in revenue.
</p>
<p>
"I also would like to see more done for education by business. The kind of
education I'm talking about is at the elementary and secondary level.
Businesses are already contributing to colleges. Businesses should do likewise
for elementary and secondary schools. Business people can play a role as
counselors and teachers. A firm might make available an engineer or
mathematician to go into schools and teach. Business should do more to offer
on-the-job training for unskilled, or limited-skills, people, perhaps through a
(lower) learning wage. We would give business tax credits to do this."
</p>
<p>
William R. Robertson, executive secretary of the Los Angeles County Federation
of Labor, AFL-CIO:
</p>
<p>
"I would like to see a change in philosophy by the incoming President relating
to labor relations and providing for fairness in our (labor) organizing efforts
and contract negotiations. . . .
</p>
<p>
"I would also like to see some protection for workers losing their jobs because
of mergers. It is a national disgrace. In too many mergers, the workers are the
ones that suffer and the country as well. Something should be done to correct
it. . . .
</p>
<p>
"And, finally, this Administration should face reality in resolving the
astronomical deficit."
</p>
<p>
Steven D. Lydenberg, an associate with the "socially responsible" investment
firm of Franklin Research & Development:
</p>
<p>
"There is an increasing interest around the country in social investing. People
want to know not just the financial implications of making a commitment in a
company, but also the social implication. That information is not very easy to
come by.
</p>
<p>
"So, if at the end of '89 corporations were disclosing in a uniform way their
yield figures, their charitable contribution figures, the numbers of women and
minorities in top management and board directors, their attitude on a number of
comparable social issues, I would be very happy."
</p>
<p>
Frank Borman, chairman of Patlex Corp. of Chatsworth, former astronaut and
former chairman of Eastern Airlines:
</p>
<p>
"We should begin to move toward taxing consumption -- a value-added tax. This
is quite controversial as Al Ullman (Oregon Democrat and former chairman of the
House Ways and Means Committee, who was defeated in 1988 after advocating a
value-added tax) will tell you. But this taxing system is needed. It would
certainly help our exports. Almost all of Europe is under the value-added
taxing system. Also, it may encourage saving instead of consumption. One of the
ways you discourage consumption is to tax it."
</p>
<p>
Michael Harrington, co-chair of Democratic Socialists of America and author of
"The Other America" and "The New American Poverty":
</p>
<p>
"I hope Secretary of State Baker will build on the basic insights of former
Treasury Secretary Baker (James Baker, former treasury secretary, was nominated
by President-elect Bush to be Secretary of State) that a settlement of Third
World debt is in the self-interest of America, opening up markets for business
and labor. But then the new Baker will have to go far beyond the old, since
Latin America now owes more than it did in 1982 when the crisis officially
began, and several countries, including Argentina and Brazil, may see democracy
subverted if current trends persist.
</p>
<p>
"At home, the nation must recognize that we can't waste young people, and
particularly minorities and women, on illiteracy, unemployment and unproductive
low-wage work. We must invest mightily in education, training and job
generation."
</p>
<p>
Alan Bromberg, a securities law expert and professor at Southern Methodist
University:
</p>
<p>
"There are several things I would like most to see changed in the economy and
business practices. One, more concentration by business and government, both
here and abroad, on . . . the facilitation of international trade and
investment. This would require wider horizons for business people . . . and
more effort by government to reduce and ultimately eliminate all kinds of
restrictions on the movement of products.
</p>
<p>
"Two, I would like to see a national consensus developed, preferably in the
form of federal legislation, on corporate takeovers and buyouts that would
recognize the efficiencies and benefits they bring as well as the dislocations
and hardships they can cause. This would involve tax policies and labor polices
and limitations on the ability of states to Balkanize corporate law by
different anti-takeover statutes everywhere. (There also should be) some kind
of limitation on management self-entrenchment and self-enrichment.
</p>
<p>
"I think we could use a lot of clarification of the securities laws. I think
the courts have done a good job of saying what insider trading is. The kind of
issues that are most difficult are what really is parking (of stock)? How much
cooperation or similar action by different individuals or different groups of
individuals makes it collaboration? These issues haven't been well resolved. .
. .
</p>
<p>
Peter Bahouth, executive director of Greenpeace in Washington:
</p>
<p>
"People now view threats to human security less in terms of political threats
and more in environmental and economic terms. So for my wish list, I would ask
first that we deal with the issue of the greenhouse effect. We better develop
some alternative views in mass transportation and cut subsidies to reflect the
true cost of fossil fuels in terms of pollution, along with the actual economic
cost of development. Then, we could put more money into research and
development of wind and solar energy.
</p>
<p>
"(Also on my wish list is) peace on earth. If we want peace on earth, we have
to start looking seriously at the fact that we are making more and more
weapons, and in a process which endangers the health of American people. . . .
Production plants have been proven to have released into the air and water
radioactivity and toxic chemicals."
</p>
<p>
"Also, it would be nice if we could learn that the rain forest affects all of
us. We need to preserve it. And we would like the tuna industry to stop killing
dolphins."
</p>
</text>
<graphic>
<p>
Drawing, JILL BANASHEK / for The Times
</p>
</graphic>
</doc>
</section>
<section>
<h2>Raw Text</h2>
<div class="output1">
</div>
</section>
<script src="app.js"></script>
</body>
</html>

JS/CSS div expand not working

I have the code below which I believe should make the 'content_cards' appear when you click on the 'title' div, and then hide when you click on it again but it doesn't seem to be working. It just seems to refresh the page.
I tried doing it by using the button as the selector but as I have other buttons on the page it won't work.
$(document).ready(function() {
$(".title").on("click", function() {
$("#content1").toggleClass("expando1");
$("#content2").toggleClass("expando2");
});
});
.expando1 {
max-height: 60rem;
}
.expando2 {
max-height: 200rem;
}
.content_cards {
overflow: hidden;
transition: all 2s ease;
max-height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<button>expand / collapse</button>
</div>
<div class="container">
<div class="card">
<h4>Trevor Macdonald</h4>
<div class="content_cards" id="content1">
<p>Born in Trinidad in 1939, Trevor worked in various aspects of the media including local newspapers, radio and television. He joined the Caribbean regional service of the BBC World Service in 1960 as a producer, before moving to London at the end of that decade to work for BBC Radio, London.
Moving to Independent Television News (ITN) in 1973, he rose steadily through the ranks. He's served as news, sports and diplomatic correspondent before moving on to become diplomatic editor and newscaster. Twice voted Newscaster of the year, McDonald is perceived as the face of ITN after years of fronting its flagship 'News at Ten' bulletin.
An accomplished journalist, he has penned several books including autobiographies on cricketers Clive Lloyd and Viv Richards. His own biography, 'Fortunate Circumstances', was published in 1993. Once viewed as the best-spoken person in the country and was reported to have fronted a two-year inquiry into the state of language learning. It warned that government education policy failed to teach pupils the necessary language skills needed for later life.
In 1992 he received an OBE in the Queen's Honours List, and received a knighthood in 1999. He continues to be the anchor for the News at Ten, and presents Tonight with Trevor McDonald, which was launched in 1999.</p>
</div>
</div>
<div class="card">
<h4>Shirley Bassey</h4>
<div class="content_cards" id="content2">
<p>Shirley Bassey was born in Tiger Bay, Cardiff in 1937, the youngest of seven children. In 1952, Shirley left school to work in the packing department of a sausage factory, all the while singing at local clubs which catered to working men.
It wasn’t long before Shirley turned professional, In 1955, Shirley appeared at the Astor Club in London, and the world began to take notice of her incredible talent.
Her first single was “Burn My Candle”, but her first real hit was “Banana Boat Song”. Her debut album, “Born to Sing the Blues” was released in 1958. Hit after hit soon followed, with “As I Love You” and “Kiss Me, Honey Honey, Kiss Me” appearing on record charts simultaneously. Shirley’s first big international hit was 1964’s “Goldfinger” from the James Bond film of the same name.
In 1977 she received the Brit Award for Best British Female Solo Artist in the previous 25 years. Bassey has been called "one of the most popular female vocalists in Britain during the last half of the 20th century." In 2000, Bassey was made a Dame by Queen Elizabeth II for services to the performing arts.</p>
</div>
</div>
<div class="card">
<h4>Sadiq Khan</h4>
<div class="content_cards" id="content2">
<p>Sadiq was born in St George’s Hospital in Tooting, growing up on a council estate in Earlsfield. He attended local state schools Fircroft Primary School (where he is now a governor), Ernest Bevin Comprehensive School and Burntwood Girls Secondary School. His father was a London Transport bus driver for more than 25 years.
Prior to becoming the MP for Tooting, Sadiq was a Human Rights solicitor and was a founding partner of one of the country's leading Human Rights firms. In his final year of practising law he was listed as one of the county's leading lawyers in two separate categories of law in the Chambers and Partners directory 2004-05 (Human Rights and Police law).
Previously the Shadow Secretary of State for Transport, Sadiq was the first ever BAME politician to be elected to the Labour Party’s Shadow Cabinet, and was the youngest member of Ed Miliband’s cabinet. He served in a number of ministerial posts during the last Labour Government. He is a member of the Labour Party’s National Executive Committee (NEC), the Labour Party’s governing and policy-making body.
Khan was elected Mayor of London in the 2016 mayoral election, succeeding Conservative Party Mayor Boris Johnson. He resigned as MP for Tooting on 9 May 2016. His election as Mayor of London made him the city's first ethnic minority mayor, and the first Muslim to become mayor of a major Western capital. Khan held the largest personal mandate of any politician in the history of the United Kingdom, and the third largest personal mandate in Europe.</p>
</div>
</div>
<div class="card">
<h4>Arthur Wharton</h4>
<div class="content_cards" id="content2">
<p>Wharton was born in Jamestown, Gold Coast (now Accra, Ghana). In 1884, aged 19, Arthur moved to England to train as a Methodist preacher at Cleveland College, Darlington.
It was whilst at College that he began his amazing sporting careers, competing at this stage as a 'gentleman amateur'. He excelled at everything he tried (even setting a record time for cycling between Preston and Blackburn in 1887).
In 1886 Arthur became the fastest man in Britain winning the Amateur Athletics Association national 100 yards champion at Stamford Bridge, London - the first time the trophy was won by a Northerner.
His sporting prowess was spotted at Darlington Football Club, where he was selected to play as goalkeeper. Arthur became the first black professional footballer in Britain. In 2014 a 16ft statue of Arthur was unveiled at the FA's national football centre in Burton.</p>
</div>
</div>
<div class="card">
<h4>Dame Kelly Holmes</h4>
<div class="content_cards" id="content2">
<p>Born in Pembury, Kent, the daughter of Derrick Holmes, a Jamaican-born car mechanic, and an English mother, Pam Norman. Her mother, 18 at the time of her birth, married painter and decorator Michael Norris, whom Holmes regards as her father, seven years later, and the couple had two more children (Kevin, born 1977 and Stuart, born 1980) before splitting up in 1987. Holmes grew up in Hildenborough and attended Hildenborough CEP School, and then Hugh Christie Comprehensive School in Tonbridge at the age of 12.
She started training for athletics at the age of 12, joining Tonbridge Athletics Club, where she was coached by David Arnold and went on to win the English schools 1500 metres in her second season in 1983.[citation needed] Her hero was British middle distance runner Steve Ovett, and she was inspired by his success at the 1980 Summer Olympics
She specialised in the 800 metres and 1500 metres events won a gold medal for both distances at the 2004 Summer Olympics in Athens, making her the first British woman to win two gold medals and the country’s first double gold medallist at the same games since Albert Hill in 1920. She set British records in numerous events and still holds the records over the 600, 800, 1000, and 1500 metres distances. </p>
</div>
</div>
<div class="card">
<h4>Zayn Malik</h4>
<div class="content_cards" id="content2">
<p>Zayn Malik was born on January 12, 1993, in Bradford, England, to a family of English-Pakistani descent. He had an early love for singing and performing, and at the age of 17 he competed in the television competition The X Factor. He was teamed up with four other male contestants to form the group act One Direction, who went on to become one of the most popular boy bands in music history. The group's debut studio album Up All Night was released in November 2011. It topped the charts in 16 countries. The lead single, "What Makes You Beautiful", was an international commercial success, reaching number one in the UK and number four in the US; it has since been certified four and six times platinum in the US and Australia, respectively.
He is an official ambassador of the British Asian Trust charity group, contributing to improving the lives of disadvantaged people living in South Asia. With his former group One Direction, he contributed to African fundraising events with Comic Relief. In March 2016, he bought a box at Bradford City for underprivileged children to watch football, named after his maternal grandfather Walter Brannan. As of April 2015, shortly after he left One Direction, Malik's net worth was £25 million ($41 million).As of April 2016, his net worth is £30 million ($49 million).
Malik left the group in March 2015. The following year, he released his first solo album. Malik signed a solo recording contract with RCA Records in 2015, with his debut studio album Mind of Mine released on 25 March 2016. The album and its lead single, "Pillowtalk", reached number one in a number of countries, including the United Kingdom, United States, Australia, Canada and New Zealand, with Malik becoming the first British male artist to debut at number one in both the UK and US with his debut single and debut album. Worldwide, he had the highest first-day and weekly streams for a debut artist.</p>
</div>
</div>
<div class="card">
<h4>Ignatius Sancho</h4>
<div class="content_cards" id="content2">
<p>Sancho was born around 1729 on board a slave ship en route to the West Indies. He spent the first two years of his life enslaved in Grenada. Orphaned in infancy, he was brought to England by his master at the age of two or three and given to three maiden sisters living in Greenwich.
He was rescued by the Duke of Montagu, who lived nearby in Blackheath. The Duke, encountering the Sancho by accident, took a liking to his frankness of manner. Sancho eventually ended up working as a butler in the Montagu household.
He went on to compose music and write poetry and plays and in 1773, Sancho and his wife set up a grocer's shop in Westminster. Sancho was very well known and his shop became a meeting place for some of the most famous writers, artists, actors and politicians of the day.
Perhaps most notable Ignatius Sancho was known for being the first Black Briton to vote in a UK election. After his death in 1780, Sancho's letters were published in a book, which became an immediate best seller. Five editions of the book were published and his writing was used as evidence to support the movement to end slavery. It was this piece that led Sancho become the first African author to have his work published in this country.</p>
</div>
</div>
</div>
That is because the .expando classes have the same specificity as the .content_cards and the .content_cards is defined last in the CSS, so it is the last that is applied.
Just putting the .content_cards above the .expando ones will fix it.
.content_cards {
overflow: hidden;
transition: all 2s ease;
max-height: 0;
}
.expando1 {
max-height: 60rem;
}
.expando2 {
max-height: 200rem;
}
Otherwise make more specific rules, like
.content_cards.expando1 {
max-height: 60rem;
}
.content_cards.expando2 {
max-height: 200rem;
}
.content_cards {
overflow: hidden;
transition: all 2s ease;
max-height: 0;
}

On Click and Opacity for simple Biography slider

Can anyone help me, i have a simple yet complicated problem. I want to make it like below
Something like if you click on one picture the others will have a shade on it.
The page im working on now is http://www.3cwaremarketing.com/VisiSite/company-10/team/
Thanks for your help. You can see the details below.
HTML
function changeIt(objName) {
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();
//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here
//A counter variable going to use for iteration
var i;
//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" />
</a>
<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" />
</a>
<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" />
</a>
<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" />
</a>
<br>
<br>
<div id="image1">
<h2>Isaac W. Jacobson</h2>
VP Business Development
<br>
<br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
<h2>Alan W. Bunker</h2>
CFO
<br>
<br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
<h2>Ed Bruno</h2>VP of Sales
<br>
<br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
<h2>A. Matthew Bunker</h2>VP Business Development
<br>
<br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
children and they live in Saratoga Springs, Utah.</div>
<br>
I simplified your Javascript and added what was necessary to achieve what you defined as requirements. Check the snippet below. This is using vanilla Javascript only. To your images, I added a class="photo" since I assume there will also be other images on the page which should not get affected.
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = ["image1","image2","image3","image4"];
var images = document.getElementsByClassName("photo");
function changeIt(objName) {
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for (var i = 0; i < objId.length; i++) {
console.log(i+": "+objId[i]);
var tempObj = document.getElementById(objId[i]);
if (objName != objId[i]) {
tempObj.style.display = "none";
images[i].style.filter = "sepia(75%)";
}
else {
tempObj.style.display = "block";
images[i].style.filter = "sepia(0)";
}
}
return;
}
/* make the effect smoothly animated in browsers that support it */
img {
transition-duration: 0.4s;
}
<a name="isaac"></a>
<a id="one" href="#isaac" onclick="changeIt('image1');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" class="photo" />
</a>
<a name="alan"></a>
<a id="two" href="#alan" onclick="changeIt('image2');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" class="photo" />
</a>
<a name="ed"></a>
<a id="three" href="#ed" onclick="changeIt('image3');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" class="photo" />
</a>
<a name="matt"></a>
<a id="four" href="#matt" onclick="changeIt('image4');">
<img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" class="photo" />
</a>
<br>
<br>
<div id="image1">
<h2>Isaac W. Jacobson</h2>
VP Business Development
<br>
<br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout
his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology
companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted
advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative
ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is
an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah.
</div>
<div id="image2" style="display:none">
<h2>Alan W. Bunker</h2>
CFO
<br>
<br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries.
He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive
Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through
his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards
and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization.
</div>
<div id="image3" style="display:none">
<h2>Ed Bruno</h2>VP of Sales
<br>
<br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets
in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO,
and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div>
<div id="image4" style="display:none">
<h2>A. Matthew Bunker</h2>VP Business Development
<br>
<br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations
and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his
career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over
30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other
methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four
children and they live in Saratoga Springs, Utah.</div>
<br>
You want to do the opposite. Instead of adding shade to other pictures, just lower their opacity.
Set all image to semi-transparent, and full opaque on hover.
On click, add an "active" class that will hold the opaque state.
$("img").click( function(){
$(this)
.addClass("active") // Adds "active" class to all images
.siblings() // Selects images other than the one that's been clicked
.removeClass("active"); // Removes the "active" class on these images
$(".text")
.hide() // Hides all texts
.eq( $(this).index() ) // select only the text corresponding to the clicked image's index
.show() // Shows only the corresponding text
})
#container{
background: #492E1D;
display: inline-block;
}
img{
opacity : 0.5;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
cursor: pointer;
}
img:hover, img.active{
opacity:1;
}
.text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
<img src="http://www.lorempixel.com/150/200/people"/>
</div>
<p class="text">Text for image 1</p>
<p class="text">Text for image 2</p>
<p class="text">Text for image 3</p>
<p class="text">Text for image 4</p>

Categories

Resources