{"id":24965,"date":"2018-10-26T22:01:13","date_gmt":"2018-10-26T14:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24965"},"modified":"2023-11-16T17:43:31","modified_gmt":"2023-11-16T09:43:31","slug":"css-only-accordion","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/","title":{"rendered":"4 Ways to Create Beautiful CSS-Only Accordions"},"content":{"rendered":"

Accordions in design are quite handy. You can use them for menus, lists, pictures, short articles, little bits of text, and even videos.<\/p>\n

Most accordions depend on JavaScript, especially jQuery<\/strong>. But now, with better CSS3 techniques, we also see good examples that use just HTML and CSS<\/strong>. This is great for times when JavaScript is turned off.<\/p>\n

It\u2019s not always easy to make accordions using only CSS. In this article, we\u2019ll explore the key ideas developers use to make one<\/strong>.<\/p>\n

There are usually two main ways to create CSS-only accordions. Each way has two common uses. One way uses hidden form elements<\/strong>. The other uses CSS pseudo-selectors<\/strong>.<\/p>\n

1. The Radio Button Method<\/h2>\n

The Radio Button Method uses a hidden radio input and a matching label tag for each section of the accordion. It works like this: when you choose a section, you\u2019re really checking the radio button for that section, just like filling out a form. When you click on another section, you select its radio button, and so on.<\/p>\n

In this method, only one section can be open<\/strong> at a time. The HTML structure looks like this:<\/p>\n

\r\n<div class=\"css-only-accordion\">\r\n    <!-- One Section Inside The Accordion -->\r\n    <div>\r\n        <input type=\"radio\" name=\"tab-1\" id=\"tab-1\">\r\n        <label for=\"tab-1\">Title of Section 1<\/label>\r\n\r\n        <div class=\"tab-content\">\r\n            <h2>Content Title (don't use h1 tag here)<\/h2>\r\n            <p>Some content.... <\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Other Sections with The Same Structure -->\r\n\r\n<\/div>\r\n\r\n<\/pre>\n
You need to add a separate radio-label pair for each section<\/strong> of the accordion. Just the HTML won\u2019t create the effect you want. You\u2019ll also need to add the right CSS rules. Let\u2019s see how you can do that.<\/p>\n
Fixed Height Vertical Tabs<\/h3>\n
In this solution (look at the image below), the developer made the radio button invisible using the display: none;<\/strong> rule. Then, he positioned the label tag, which has each tab\u2019s title, relatively and gave an absolute position to the corresponding label:after<\/strong> pseudo-element.<\/p>\n
This pseudo-element displays the green \u201c+\u201d sign handle that opens the tabs. The closed tabs have handles with green \u201c-\u201d signs. In the CSS, these closed tabs are selected using the element + element<\/a> selector.<\/p>\n
You also need to set a fixed height for the content of the open tab. For this, use the element1 ~ element2<\/a> CSS selector to select the body of the open tab (marked with the tab-content class in the HTML above).<\/p>\n
The basic CSS logic for this is:<\/p>\n
\r\ninput[type=radio] {\r\n    display: none;\r\n}\r\n\r\nlabel {\r\n    position: relative;\r\n    display: block;\r\n}\r\n\r\nlabel:after {\r\n    content: \"+\";\r\n    position: absolute;\r\n    right: 1em;\r\n}\r\n\r\ninput:checked + label:after {\r\n    content: \"-\";\r\n}\r\n\r\ninput:checked ~ .tab-content {\r\n    height: 150px;\r\n}\r\n\r\n <\/pre>\n
You can see the full CSS here on Codepen<\/a>. The CSS was originally written in Sass, but you can view the compiled CSS file by clicking on the \u201cView Compiled\u201d button.<\/p>\n
\"Example<\/a><\/figure>\n
\n
<\/i><\/div>\n
Codepen by Jon Yablonski<\/a><\/div>\n
<\/div>\n<\/div>\n
Image Accordion with Radio Buttons<\/h3>\n
This stunning image accordion also uses the radio button method. But instead of labels, here the developer used the figcaption HTML tag<\/strong> to make the accordion work.<\/p>\n
The CSS is a bit different in this case because the tabs are arranged horizontally, not vertically. The developer used the element + element CSS selector (which was used in the previous example to select the toggles) to make sure that the edges of the overlapped images are still visible.<\/p>\n
\"Example<\/figure>\n
\n
<\/i><\/div>\n
Tympanus.net<\/a><\/div>\n
<\/div>\n<\/div>\n
Read the detailed guide<\/a> on how to create this elegant CSS-only image accordion.<\/p>\n
2. The Checkbox Method<\/h2>\n
The checkbox method uses the checkbox input type instead of the radio button. When users select a tab, they basically tick the corresponding checkbox.<\/p>\n
The main difference from the radio button method is that it\u2019s possible to open multiple tabs at the same time<\/strong>, just like ticking multiple checkboxes in a form.<\/p>\n
However, the tabs don\u2019t close automatically when another one is clicked. The HTML setup is similar to before, but in this case, you need to use checkboxes for input types.<\/p>\n
\r\n<div class=\"css-only-accordion\">\r\n    <!-- One Section Inside The Accordion -->\r\n    <div>\r\n        <input type=\"radio\" name=\"tab-1\" id=\"tab-1\">\r\n        <label for=\"tab-1\">Title of Section 1<\/label>\r\n\r\n        <div class=\"tab-content\">\r\n            <h2>Content Title (don't use h1 tag here)<\/h2>\r\n            <p>Some content.... <\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Other Sections with The Same Structure -->\r\n\r\n<\/div>\r\n\r\n<\/pre>\n
Fixed Height Checkbox Accordion<\/h3>\n
For fixed height content tabs, the CSS logic is similar to the radio button scenario, with the input type switched from radio to checkbox. You can examine the code on this Codepen pen<\/a>.<\/p>\n
\"Checkbox<\/a><\/figure>\n
\n
<\/i><\/div>\n
Codepen by Jon Yablonski<\/a><\/div>\n
<\/div>\n<\/div>\n
Fluid Height Checkbox Accordion<\/h3>\n
When multiple tabs are open simultaneously, fixed height tabs can negatively impact user experience as the accordion\u2019s height might grow significantly. This issue can be mitigated by switching from fixed height to fluid height<\/strong>, allowing the height of open tabs to adjust according to the content size.<\/p>\n
To achieve this, alter the fixed height of the tab content to a max-height<\/strong> and use relative units<\/strong>:<\/p>\n
\r\ninput:checked ~ .tab-content {\r\n    max-height: 50em;\r\n}\r\n\r\n <\/pre>\n
To gain a deeper understanding of how this method functions, you can review this Codepen<\/a>.<\/p>\n
\"Checkbox<\/a><\/figure>\n
\n
<\/i><\/div>\n
Codepen by Jon Yablonski<\/a><\/div>\n
<\/div>\n<\/div>\n
3. The :target Method<\/h2>\n
The :target<\/a> pseudo-selector, part of CSS3, allows linking an HTML element to an anchor tag in this way:<\/p>\n
\r\n<section id=\"tab-1\">\r\n    <h2><a href=\"#tab-1\">Title of the Tab<\/a><\/h2>\r\n    <p>Content of the Tab<\/p>\r\n<\/section>\r\n\r\n <\/pre>\n
Clicking on a tab\u2019s title triggers the opening of the entire section via the :target<\/strong> pseudo-selector, also altering the URL to a format like: www.some-url.com\/#tab-1<\/em>.<\/p>\n
With CSS, the open tab can be styled using the section:target { \u2026 }<\/strong> rule. We offer an excellent tutorial<\/a> at hongkiat on crafting appealing CSS-only accordions using the :target<\/strong> method for both vertical and horizontal designs.<\/p>\n
\"Target<\/figure>\n
A key limitation of the :target<\/strong> approach is that it modifies the URL upon tab selection<\/strong>. This impacts browser history, meaning the back button won\u2019t return the user to the previous page but rather to the accordion\u2019s former state.<\/p>\n
4. The :hover Method<\/h2>\n
This latter shortcoming can be overcome if we utilize the :hover<\/strong> CSS pseudo-selector instead of :target<\/strong>, but in this case the tabs won\u2019t react to the click but to the hover event. The trick here is that you need to either hide the unhovered elements<\/strong>, or reduce their width or height<\/strong> \u2013 depending on the layout of the tabs<\/p>\n
The hovered element needs to be made visible, or set to full width\/height in order to make the accordion work.<\/p>\n
The following 3 CSS-only accordions were all made with the :hover method, click on the links below the screenshots to take a look at the code.<\/p>\n
Horizontal Image Accordion<\/h3>\n
\"Hover<\/a><\/figure>\n
\n
<\/i><\/div>\n
CodePen by vavik<\/a><\/div>\n
<\/div>\n<\/div>\n
Skewed Accordion<\/h3>\n
\"Skewed<\/a><\/figure>\n
\n
<\/i><\/div>\n
Codepen by Gerald De Leon<\/a><\/div>\n
<\/div>\n<\/div>\n
Hover-Activated Accordion With Default State<\/h3>\n
\"Hover-Activated<\/a><\/figure>\n
\n
<\/i><\/div>\n
Codepen by Cory<\/a><\/div>\n
<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"
Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[3655,507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n4 Ways to Create Beautiful CSS-Only Accordions - Hongkiat<\/title>\n<meta name=\"description\" content=\"Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Ways to Create Beautiful CSS-Only Accordions\" \/>\n<meta property=\"og:description\" content=\"Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-26T14:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-16T09:43:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-only-accordion\/radio-button-hack-fixed.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"4 Ways to Create Beautiful CSS-Only Accordions\",\"datePublished\":\"2018-10-26T14:01:13+00:00\",\"dateModified\":\"2023-11-16T09:43:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/\"},\"wordCount\":1034,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-only-accordion\\\/radio-button-hack-fixed.jpg\",\"keywords\":[\"Content Accordion\",\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/\",\"name\":\"4 Ways to Create Beautiful CSS-Only Accordions - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-only-accordion\\\/radio-button-hack-fixed.jpg\",\"datePublished\":\"2018-10-26T14:01:13+00:00\",\"dateModified\":\"2023-11-16T09:43:31+00:00\",\"description\":\"Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-only-accordion\\\/radio-button-hack-fixed.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-only-accordion\\\/radio-button-hack-fixed.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-only-accordion\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 Ways to Create Beautiful CSS-Only Accordions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"4 Ways to Create Beautiful CSS-Only Accordions - Hongkiat","description":"Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.","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:\/\/www.hongkiat.com\/blog\/css-only-accordion\/","og_locale":"en_US","og_type":"article","og_title":"4 Ways to Create Beautiful CSS-Only Accordions","og_description":"Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.","og_url":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-10-26T14:01:13+00:00","article_modified_time":"2023-11-16T09:43:31+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-only-accordion\/radio-button-hack-fixed.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"4 Ways to Create Beautiful CSS-Only Accordions","datePublished":"2018-10-26T14:01:13+00:00","dateModified":"2023-11-16T09:43:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/"},"wordCount":1034,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-only-accordion\/radio-button-hack-fixed.jpg","keywords":["Content Accordion","CSS","CSS Tutorials"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/","url":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/","name":"4 Ways to Create Beautiful CSS-Only Accordions - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-only-accordion\/radio-button-hack-fixed.jpg","datePublished":"2018-10-26T14:01:13+00:00","dateModified":"2023-11-16T09:43:31+00:00","description":"Guides on how to create CSS-only accordions using radio button, checkbox, :target and :hover method.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-only-accordion\/radio-button-hack-fixed.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-only-accordion\/radio-button-hack-fixed.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-only-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"4 Ways to Create Beautiful CSS-Only Accordions"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6uF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24965"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24965\/revisions"}],"predecessor-version":[{"id":70311,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24965\/revisions\/70311"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24965"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}