Flex Cards Accordion Script
Description: This innovative script uses CSS flexbox to create cards that when clicked on expands to show copious amount of information in a compact, manageable manner. Think of it as an expandable cards based layout, where the cards provide a quick overview of each content at a glance, and clicking on a card reveals the full information. Based on the powerful DD Accordion Script core file, it supports a plethora of features, including cookie based persistence of expanded content, reveal content onclick or onmouseover, animation speed, and more.
This is an awesome script to organize and show FAQs, employee biographies, and any linear collection of content in an interactive, compact manner. A good usage of this script can be seen the epic blog post "How to Become a Virtual Assistant- 9 Interviews" over at BestofBudgets.com Kate uses this script to neatly organize and display 9 interviews with virtual assistants that span over 8,000 words without it becoming overwhelming in the slightest to the reader.
Nifty!
Demo:
Expand 1st header | Collapse 1st header | Toggle 2nd header
Paul Allen
American business magnate and philanthropist.
Steve Urkel
Popular character on the hit show Family Matters
Connie Chung
Veteran American TV journalist
Kate Middleton
Duchess of Cambridge
Bill Gates
Founder of Microsoft Inc. Paul Allen
American business magnate and philanthropist. Steve Urkel
Popular character on the hit show Family Matters Connie Chung
Veteran American TV journalist Kate Middleton
Duchess of CambridgePaul Gardner Allen (born January 21, 1953) is an American business magnate, investor and philanthropist. He co-founded Microsoft alongside Bill Gates. In August 2018, he was estimated to be the 46th-richest person in the world, with an estimated net worth of $20.2 billion.[2]
Allen is the founder and Chairman[3] of Vulcan Inc., which manages his various business and philanthropic efforts. Allen has a multibillion-dollar investment portfolio including technology and media companies, real estate holdings, and stakes in other companies. He owns two professional sports teams: the Seattle Seahawks of the National Football League[4] and the Portland Trail Blazers of the National Basketball Association,[5] and is part-owner of the Seattle Sounders FC, which joined Major League Soccer in 2009.[6]
He is the founder of Allen Institute for Brain Science,[7] Institute for Artificial Intelligence,[8] Institute for Cell Science,[9] and Stratolaunch Systems. -Wikipedia
Steven Quincy Urkel is a fictional character on the ABC/CBS sitcom Family Matters who was portrayed by Jaleel White.[1] Originally slated to have been a one-time only character on the show, he soon broke out to be its most popular character and gradually became its protagonist.[2][3][4][5] Due to the Urkel character's off-putting characteristics and the way he's written to stir up events and underscore the plot or even move it along, he is considered a nuisance by the original protagonist's family, the Winslows, though they come to accept him over time.
The character is the epitome of a geek or nerd of the era, due to traits such as large, thick eyeglasses, flood pants held up by suspenders, multi-colored cardigan sweaters, and a high-pitched voice.[6] He professes love for his neighbor Laura Winslow, who is a character in the main family of the series, but this love of his is written as a accent on or trigger for events and crises, and is therefore very unrequited.
For the Urkel character's debut through the rest of the series' run, he is central to many of its running gags, primarily property damage and/or personal injury as a result of his inventions going awry or his outright clumsiness.[7] He becomes known by viewers and characters alike for several catchphrases uttered after some humorous misfortune occurs, including "I've fallen and I can't get up!", "Did I do that?" "Whoa, Mama!" and "Look what you did!" (on occasions when someone else caused the damage, though usually the accident was indirectly caused by Urkel).-Wikipedia
Constance Yu-Hwa Chung Povich (Cantonese Yale: Jung Yukwa; born August 20, 1946), known as Connie Chung, is an American journalist.
She has been an anchor and reporter for the U.S. television news networks NBC, CBS, ABC, CNN, and MSNBC. Some of her more famous interview subjects include Claus von Bulow and U.S. Representative Gary Condit, whom Chung interviewed first after the Chandra Levy disappearance,[1] and basketball legend Earvin "Magic" Johnson after he went public about being HIV-positive. In 1993, she became only the second female to co-anchor a network newscast as part of CBS Evening News. She was removed in 1995 as CBS Evening News co-anchor after a controversial interview with a fireman, during rescue efforts at the Oklahoma City bombing, which seemed inappropriately combative, and her interview tactics to get Newt Gingrich's mother to admit her unguarded thoughts about Hillary Clinton.-Wikipedia
Catherine, Duchess of Cambridge (born Catherine Elizabeth Middleton; 9 January 1982[1]) is a member of the British royal family. Her husband, Prince William, Duke of Cambridge, is expected to become king of the United Kingdom and 15 other Commonwealth realms, making Catherine a likely future queen consort.[2]
Catherine grew up in Chapel Row, a village near Newbury, Berkshire, England.[3] She studied art history in Scotland at the University of St Andrews, where she met William in 2001. Their engagement was announced in November 2010. They married on 29 April 2011 at Westminster Abbey. The Duke and Duchess's children, Prince George, Princess Charlotte, and Prince Louis of Cambridge, are third, fourth, and fifth in the line of succession to the British throne.
The Duchess of Cambridge's charity works focus mainly on issues surrounding young children, addiction, and art. To encourage people to open up about their mental issues, the Duke and Duchess of Cambridge and Prince Harry initiated the mental health awareness campaign "Heads Together" in April 2016.
The media has called Catherine's impact on British and American fashion the "Kate Middleton effect".[10] In 2012 and 2013, Time magazine selected her as one of the 100 Most Influential People in the World.-Wikipedia
William Henry Gates III KBE (born October 28, 1955) is an American business magnate, investor, author, philanthropist, humanitarian, and principal founder of Microsoft Corporation.[2][3] During his career at Microsoft, Gates held the positions of chairman, CEO and chief software architect, while also being the largest individual shareholder until May 2014.
In 1975, Gates and Paul Allen launched Microsoft, which became the world's largest PC software company.[4][a] Gates led the company as chief executive officer until stepping down in January 2000, but he remained as chairman and created the position of chief software architect for himself.[7] In June 2006, Gates announced that he would be transitioning from full-time work at Microsoft to part-time work and full-time work at the Bill & Melinda Gates Foundation, which was established in 2000.[8] He gradually transferred his duties to Ray Ozzie and Craig Mundie.[9] He stepped down as chairman of Microsoft in February 2014 and assumed a new post as technology adviser to support the newly appointed CEO Satya Nadella.
Gates is one of the best-known entrepreneurs of the personal computer revolution. He has been criticized for his business tactics, which have been considered anti-competitive. This opinion has been upheld by numerous court rulings.-Wikipedia
Paul Gardner Allen (born January 21, 1953) is an American business magnate, investor and philanthropist. He co-founded Microsoft alongside Bill Gates. In August 2018, he was estimated to be the 46th-richest person in the world, with an estimated net worth of $20.2 billion.[2]
Allen is the founder and Chairman[3] of Vulcan Inc., which manages his various business and philanthropic efforts. Allen has a multibillion-dollar investment portfolio including technology and media companies, real estate holdings, and stakes in other companies. He owns two professional sports teams: the Seattle Seahawks of the National Football League[4] and the Portland Trail Blazers of the National Basketball Association,[5] and is part-owner of the Seattle Sounders FC, which joined Major League Soccer in 2009.[6]
He is the founder of Allen Institute for Brain Science,[7] Institute for Artificial Intelligence,[8] Institute for Cell Science,[9] and Stratolaunch Systems. -Wikipedia
Steven Quincy Urkel is a fictional character on the ABC/CBS sitcom Family Matters who was portrayed by Jaleel White.[1] Originally slated to have been a one-time only character on the show, he soon broke out to be its most popular character and gradually became its protagonist.[2][3][4][5] Due to the Urkel character's off-putting characteristics and the way he's written to stir up events and underscore the plot or even move it along, he is considered a nuisance by the original protagonist's family, the Winslows, though they come to accept him over time.
The character is the epitome of a geek or nerd of the era, due to traits such as large, thick eyeglasses, flood pants held up by suspenders, multi-colored cardigan sweaters, and a high-pitched voice.[6] He professes love for his neighbor Laura Winslow, who is a character in the main family of the series, but this love of his is written as a accent on or trigger for events and crises, and is therefore very unrequited.
For the Urkel character's debut through the rest of the series' run, he is central to many of its running gags, primarily property damage and/or personal injury as a result of his inventions going awry or his outright clumsiness.[7] He becomes known by viewers and characters alike for several catchphrases uttered after some humorous misfortune occurs, including "I've fallen and I can't get up!", "Did I do that?" "Whoa, Mama!" and "Look what you did!" (on occasions when someone else caused the damage, though usually the accident was indirectly caused by Urkel).-Wikipedia
Constance Yu-Hwa Chung Povich (Cantonese Yale: Jung Yukwa; born August 20, 1946), known as Connie Chung, is an American journalist.
She has been an anchor and reporter for the U.S. television news networks NBC, CBS, ABC, CNN, and MSNBC. Some of her more famous interview subjects include Claus von Bulow and U.S. Representative Gary Condit, whom Chung interviewed first after the Chandra Levy disappearance,[1] and basketball legend Earvin "Magic" Johnson after he went public about being HIV-positive. In 1993, she became only the second female to co-anchor a network newscast as part of CBS Evening News. She was removed in 1995 as CBS Evening News co-anchor after a controversial interview with a fireman, during rescue efforts at the Oklahoma City bombing, which seemed inappropriately combative, and her interview tactics to get Newt Gingrich's mother to admit her unguarded thoughts about Hillary Clinton.-Wikipedia
Catherine, Duchess of Cambridge (born Catherine Elizabeth Middleton; 9 January 1982[1]) is a member of the British royal family. Her husband, Prince William, Duke of Cambridge, is expected to become king of the United Kingdom and 15 other Commonwealth realms, making Catherine a likely future queen consort.[2]
Catherine grew up in Chapel Row, a village near Newbury, Berkshire, England.[3] She studied art history in Scotland at the University of St Andrews, where she met William in 2001. Their engagement was announced in November 2010. They married on 29 April 2011 at Westminster Abbey. The Duke and Duchess's children, Prince George, Princess Charlotte, and Prince Louis of Cambridge, are third, fourth, and fifth in the line of succession to the British throne.
The Duchess of Cambridge's charity works focus mainly on issues surrounding young children, addiction, and art. To encourage people to open up about their mental issues, the Duke and Duchess of Cambridge and Prince Harry initiated the mental health awareness campaign "Heads Together" in April 2016.
The media has called Catherine's impact on British and American fashion the "Kate Middleton effect".[10] In 2012 and 2013, Time magazine selected her as one of the 100 Most Influential People in the World.-Wikipedia
Directions:
Step 1: Insert the following code in the HEAD section of your page
Note the "doctype" code at the very top- this script requires a valid doctype in order to work correctly. You can remove it if your page already has one declared. The code above references 2 external files and an image file, which you need to download below (right click/ select "Save As"):
- flexcardaccordion.css
- ddaccordion.js (customize "
ajaxloadingmsg" variable near the top inside this file). - loading2.gif (image used to indicate Ajax content is loading, if enabled)
By default, upload these files into the same directory as where your webpage resides.
Step 2: Insert the below sample code into the BODY section of your page:
That's it! Continue reading for some helpful information.
HTML and CSS Structure
The markup for Flex Cards Accordion can be logically thought of as two parts.
The first part is the cards interface, which looks like this:
<!-- Cards Layout Section (5 cards in demo) -->
<div class="flexcards" id="flexcards1">
<div class="profiles">
<img src="executive1.jpg" /> <h3>Paul Allen</h3> American business magnate
and philanthropist.
</div>
<div class="profiles">
<img src="executive2.jpg" /> <h3>Steve Urkel</h3> Popular character on the
hit show Family Matters
</div>
<div class="profiles">
<img src="executive3.jpg" /> <h3>Connie Chung</h3> Veteran American TV
journalist
</div>
</div>
The main wrapper should contain the CSS class "flexcards",
plus an optional ID attribute. Within this wrapper, each DIV
class="profiles" element creates a "card" that can be clicked on to
expand some content. In this case, there are 3 cards in total.
The second part is a series of DIVs on the page that correspond with the content of each "card", such as:
<!-- Corresponding Contents Section (5 content DIVs in
demo) -->
<div class="details">
<p>Paul Gardner Allen (born January 21, 1953) is an American business magnate,
investor and philanthropist. He co-founded Microsoft alongside Bill Gates. In
August 2018, he was estimated to be the 46th-richest person in the world, with
an estimated net worth of $20.2 billion.[2]</p>
</div>
<div class="details">
<p>Steven Quincy Urkel is a fictional character on the ABC/CBS sitcom Family
Matters who was portrayed by Jaleel White.[1] Originally slated to have been a
one-time only character on the show, he soon broke out to be its most popular
character and gradually became its protagonist.[2][3][4][5] Due to the Urkel
character's off-putting characteristics and the way he's written to stir up
events and underscore the plot or even move it along, he is considered a
nuisance by the original protagonist's family, the Winslows, though they come to
accept him over time.</p>
</div>
<div class="details">
<p>Connie Chung has been an anchor and reporter for the U.S. television news
networks NBC, CBS, ABC, CNN, and MSNBC. Some of her more famous interview
subjects include Claus von Bulow and U.S. Representative Gary Condit, whom Chung
interviewed first after the Chandra Levy disappearance,[1] and basketball legend
Earvin "Magic" Johnson after he went public about being HIV-positive. In 1993,
she became only the second female to co-anchor a network newscast as part of CBS
Evening News. She was removed in 1995 as CBS Evening News co-anchor after a
controversial interview with a fireman, during rescue efforts at the Oklahoma
City bombing, which seemed inappropriately combative, and her interview tactics
to get Newt Gingrich's mother to admit her unguarded thoughts about Hillary
Clinton.-Wikipedia</p>
</div>
Each accordion content is wrapped in a DIV class="details"
element, which tells the script that this content corresponds to a particular
card. Which card exactly? It's simply based on sequential order as the content
appears (so first DIV belongs to the first card, 2nd DIV the 2nd card etc).
Since there were 3 cards defined earlier, we define 3 accordion content.
The above markup can be added anywhere on the page, and not necessarily immediately following the cards interface.
Initializing the Script
To jump start the script and transform all the markup above into
a flexible cards based accordion, call the function ddaccordion.init()
in the HEAD section of your page:
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "profiles", //Shared CSS class name of headers group
contentclass: "details", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
scrolltocontent: true, //scroll to expanded content each time after it's been expanded by the user?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openprofile"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
As mentioned, Flex Cards Accordion is based on the main .js file of DD Accordion, and as such, supports all the myriad of features afforded by the later. For detailed documentation on how to customize the script, check out the DD Accordion Main page.