{"id":23418,"date":"2020-09-30T22:06:15","date_gmt":"2020-10-01T05:06:15","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=23418"},"modified":"2022-07-20T08:38:20","modified_gmt":"2022-07-20T15:38:20","slug":"bootstrap-accordion","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/","title":{"rendered":"Using the Bootstrap Framework to Create an Accordion"},"content":{"rendered":"\n

When we think of an accordion, what usually comes to mind is the musical instrument \u2013 a box shaped contraption that uses a keyboard or manual to push bellows \u2013 the \u201cbox\u201d portion of the instrument \u2013 together and apart.
<\/p>\n\n\n\n

A Bootstrap Accordion is not the musical instrument variety, but the concept has similarities. This article reviews how to get started with Bootstrap, goes over what the accordion UI element is, and how to construct one using the Bootstrap framework.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

The first thing we need to do to set up a Bootstrap Accordion is to ensure we have the proper dependencies. For this, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap\u2019s Quick Start<\/a> page for help in getting dependencies added to your project.
<\/p>\n\n\n\n

It\u2019s your decision in how to handle the dependencies, but the easiest way is to use the content delivery network \u2013 the CDN \u2013 for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script><\/code> tags \u2013 order matters here.
<\/p>\n\n\n\n

You\u2019re now ready to get started!<\/p>\n\n\n\n

Using Bootstrap Documentation to Create an Accordion<\/h2>\n\n\n\n

On the left hand side of the \u201cIntroduction\/Getting Started\u201d page, you see a sidebar that links to various things. Take a look for the \u201cComponents\u201d link and click on it. This will navigate you to the first of Bootstrap\u2019s many available components: \u201cAlerts\u201d. If we take a look at the sidebar again, it now shows the different links to all the different components we have available to us. 
<\/p>\n\n\n\n

Click on the \u201cCollapse\u201d component to get started. This will have the information we need if you scroll down to the Accordion section.<\/p>\n\n\n\n

How It Works<\/h3>\n\n\n\n

Bootstrap uses a JavaScript plugin called collapse. This is primarily how the accordion component works. This plugin is extended to the accordion component when we wrap the outer container in the .accordion class. This will animate the height of each Bootstrap card from it\u2019s initial height to 0 and back when you toggle it on and off. 
<\/p>\n\n\n\n

Take a look at the structure of the markup to see if you can find patterns between the card-header and the rest of the card and how the data attributes link up with the ids in the elements.
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n \n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width">\n  <title>Bootstrap Navbar<\/title>\n  <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T"\n   crossorigin="anonymous">\n  <link href="style.css" rel="stylesheet" type="text\/css" \/>\n<\/head>\n \n<body>\n  <nav class="navbar navbar-expand-lg navbar-light bg-light">\n    <a class="navbar-brand" href="#">Bootstrap Accordion Demo<\/a>\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n   <span class="navbar-toggler-icon"><\/span>\n <\/button>\n <\/nav>\n <div class="accordion" id="accordionExample">\n <div class="card">\n   <div class="card-header" id="headingOne">\n     <h2 class="mb-0">\n       <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">\n         Money Plane\n       <\/button>\n     <\/h2>\n   <\/div>\n   <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">\n     <div class="card-body">\n     <img src="https:\/\/image.tmdb.org\/t\/p\/original\/pq0JSpwyT2URytdFG0euztQPAyR.jpg" alt="Money Plane" class="img-fluid">\n     <h5 style="margin-bottom: 0px;">Money Plane<\/h5>\n     <p style="font-size: 0.8rem; font-style: italic;">Release Date: 9\/28\/2020<\/p>\n     <p>A professional thief with $40 million in debt and his family's life on the line must commit one final heist - rob a futuristic airborne casino filled with the world's most dangerous criminals.<\/p>\n   <\/div>\n   <\/div>\n <\/div>\n <div class="card">\n   <div class="card-header" id="headingTwo">\n     <h2 class="mb-0">\n       <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">\n         Mulan\n       <\/button>\n     <\/h2>\n   <\/div>\n   <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">\n     <div class="card-body"><img src="https:\/\/image.tmdb.org\/t\/p\/original\/zzWGRw277MNoCs3zhyG3YmYQsXv.jpg" alt="Mulan" class="img-fluid"><h5 style="margin-bottom: 0px;">Mulan<\/h5><p style="font-size: 0.8rem; font-style: italic;">Release Date: 9\/9\/2020<\/p><p>When the Emperor of China issues a decree that one man per family must serve in the Imperial Chinese Army to defend the country from Huns, Hua Mulan, the eldest daughter of an honored warrior, steps in to take the place of her ailing father. She is spirited, determined and quick on her feet. Disguised as a man by the name of Hua Jun, she is tested every step of the way and must harness her innermost strength and embrace her true potential.<\/p><\/div>\n   <\/div>\n <\/div>\n <div class="card">\n   <div class="card-header" id="headingThree">\n     <h2 class="mb-0">\n       <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">\n         Phineas and Ferb The Movie: Candace Against the Universe\n       <\/button>\n     <\/h2>\n   <\/div>\n   <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">\n     <div class="card-body"><img src="https:\/\/image.tmdb.org\/t\/p\/original\/lkeBhXGJFRlhI7cBWn8LQQAdZqK.jpg" alt="Phineas and Ferb The Movie: Candace Against the Universe" class="img-fluid"><h5 style="margin-bottom: 0px;">Phineas and Ferb The Movie: Candace Against the Universe<\/h5><p style="font-size: 0.8rem; font-style: italic;">Release Date: 8\/27\/2020<\/p><p>Phineas and Ferb travel across the galaxy to rescue their older sister Candace, who has been abducted by aliens and taken to a utopia in a far-off planet, free of her pesky little brothers.<\/p><\/div>\n   <\/div>\n <\/div>\n<\/div>\n   <script src="https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js" integrity="sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"><\/script>\n   <script src="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"><\/script>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Always double check accessibility standards for these Bootstrap components to be sure they meet accessibility standards. You may need to check out ways to customize your component to make your collapsible element more accessible. 
<\/p>\n\n\n\n
Keep in mind which ids need to match up with which data attributes to get the logic to work on Bootstrap\u2019s end. Sometimes it\u2019s helpful to check the minified CSS and JS files that Bootstrap provides with their CDN to learn more about the structure. 
<\/p>\n\n\n\n
That\u2019s the accordion component! Good luck on traversing the rest of your Bootstrap journey.<\/p>\n","protected":false},"excerpt":{"rendered":"When we think of an accordion, what usually comes to mind is the musical instrument \u2013 a box shaped contraption that uses a keyboard or manual to push bellows \u2013 the \u201cbox\u201d portion of the instrument \u2013 together and apart. A Bootstrap Accordion is not the musical instrument variety, but the concept has similarities. This…","protected":false},"author":77,"featured_media":23419,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-23418","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"\nBootstrap Accordion | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to use Bootstrap's Accordion component to mamipulate UI in your web project on Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Bootstrap Framework to Create an Accordion\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Bootstrap's Accordion component to mamipulate UI in your web project on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-01T05:06:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-20T15:38:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"681\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Using the Bootstrap Framework to Create an Accordion\",\"datePublished\":\"2020-10-01T05:06:15+00:00\",\"dateModified\":\"2022-07-20T15:38:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\"},\"wordCount\":479,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\",\"name\":\"Bootstrap Accordion | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg\",\"datePublished\":\"2020-10-01T05:06:15+00:00\",\"dateModified\":\"2022-07-20T15:38:20+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Learn how to use Bootstrap's Accordion component to mamipulate UI in your web project on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg\",\"width\":1020,\"height\":681,\"caption\":\"Musician playing accordion\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using the Bootstrap Framework to Create an Accordion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap Accordion | Career Karma","description":"Learn how to use Bootstrap's Accordion component to mamipulate UI in your web project on Career Karma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/","og_locale":"en_US","og_type":"article","og_title":"Using the Bootstrap Framework to Create an Accordion","og_description":"Learn how to use Bootstrap's Accordion component to mamipulate UI in your web project on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-10-01T05:06:15+00:00","article_modified_time":"2022-07-20T15:38:20+00:00","og_image":[{"width":1020,"height":681,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Using the Bootstrap Framework to Create an Accordion","datePublished":"2020-10-01T05:06:15+00:00","dateModified":"2022-07-20T15:38:20+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/"},"wordCount":479,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/","name":"Bootstrap Accordion | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg","datePublished":"2020-10-01T05:06:15+00:00","dateModified":"2022-07-20T15:38:20+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Learn how to use Bootstrap's Accordion component to mamipulate UI in your web project on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/simone-impei-RLHtsH4_Blw-unsplash.jpg","width":1020,"height":681,"caption":"Musician playing accordion"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Using the Bootstrap Framework to Create an Accordion"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=23418"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/23418\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/23419"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=23418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=23418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=23418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}