{"id":11433,"date":"2024-03-21T20:59:05","date_gmt":"2024-03-21T15:59:05","guid":{"rendered":"https:\/\/codehim.com\/?p=11433"},"modified":"2024-03-21T20:59:38","modified_gmt":"2024-03-21T15:59:38","slug":"toggle-content-visibility-using-pure-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/","title":{"rendered":"Toggle Content Visibility Using Pure CSS"},"content":{"rendered":"

This code implements a feature to toggle the visibility of content using pure CSS. It hides and shows additional cards. This method helps create collapsible sections or expand content<\/a> lists without JavaScript.<\/p>\n

You can use this code on websites to create collapsible sections or expandable content lists. It’s beneficial because it doesn’t require JavaScript, reducing page load times. This makes the website more efficient and improves user experience.<\/p>\n

How to Toggle Content Visibility Using Pure CSS<\/h2>\n

1. Start by setting up your HTML structure. You’ll need a container element to hold your content, checkboxes to trigger the visibility toggle, and the content you want to hide or show.<\/p>\n

<div class=\"container\">\r\n  <!-- hidden action-->\r\n  <input id=\"more\" type=\"checkbox\"\/>\r\n  <!-- visible content-->\r\n  <div class=\"cards\">\r\n    <div class=\"card\">\r\n      <div>card #1<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #2<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #3<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #4<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #5<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #6<\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- visible action-->\r\n  <div class=\"show-more-cards\">\r\n    <label for=\"more\">show more<\/label>\r\n  <\/div>\r\n  <!-- hidden content-->\r\n  <div class=\"cards more\">\r\n    <div class=\"card\">\r\n      <div>card #1<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #2<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #3<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #4<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #5<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #6<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #7<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #8<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #9<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #10<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #11<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #12<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #13<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #14<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #15<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #16<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #17<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #18<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #19<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #20<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #21<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #22<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #23<\/div>\r\n    <\/div>\r\n    <div class=\"card\">\r\n      <div>card #24<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
2. Next, apply CSS to hide the checkbox input visually. You can achieve this by setting its display property to “none” or positioning it off-screen while ensuring it remains accessible for screen readers.<\/p>\n
Utilize CSS selectors and the :checked pseudo-class to toggle the visibility of the hidden content when the checkbox input is checked. This can be achieved by targeting the adjacent sibling or child elements of the checkbox input.<\/p>\n
html,\r\nbody {\r\n  scrollbar-gutter: stable;\r\n}\r\n\r\n.container #more {\r\n  display: none;\r\n}\r\n.container .more .card {\r\n  animation: view-cards both linear;\r\n  animation-timeline: view(y 90dvh auto);\r\n\r\n}\r\n.container:not(:has(input[type=checkbox]:checked)) .more {\r\n  display: none;\r\n}\r\n\r\n@keyframes view-cards {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\/*\r\n *\r\n * demo\r\n * \r\n*\/\r\nbody{\r\n  margin: 0;\r\n  font-family: sans-serif;\r\n}\r\n\r\n.container {\r\n  max-width: 80vw;\r\n  margin-block: 10vh;\r\n  margin-inline: auto;\r\n}\r\n.container .cards {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 2rem;\r\n}\r\n.container .cards .card {\r\n  min-height: 25dvh;\r\n  display: grid;\r\n  place-content: center;\r\n  background-color: var(--stop-color-2);\r\n background: #fff;\r\n  color: #666;\r\n  transition: scale 200ms;\r\n  \/* \t\t\timg {\r\n  \tdisplay: block;\r\n  \tobject-fit: cover;\r\n  } *\/\r\n}\r\n.container .cards .card:hover {\r\n  scale: 1.1;\r\n  z-index: 1;\r\n}\r\n.container .show-more-cards {\r\n  margin-block: 1rem;\r\n  text-align: center;\r\n}\r\n.container .show-more-cards label {\r\n  display: inline-flex;\r\n  padding: 0.75rem 1.2rem;\r\n  cursor: pointer;\r\n  text-transform: uppercase;\r\n  font-weight: bold;\r\n  background-color: #ffffff1a;\r\n  color: #fff;\r\n  border: 2px solid #ffffff66;\r\n  border-radius: 0.35rem;\r\n  transition: scale 200ms;\r\n}\r\n.container .show-more-cards label:hover {\r\n  scale: 1.4;\r\n}<\/pre>\n
If desired, you can enhance the user experience by adding animation effects to the content transition. CSS keyframes or transitions can be applied to create smooth transitions when revealing or hiding content.<\/p>\n
Customize the styles of your toggle feature to match your website’s design aesthetic. You can adjust colors, fonts, and spacing to ensure consistency with the overall theme of your website.<\/p>\n
That’s all! hopefully, you have successfully created Toggle Content Visibility Using Pure Css. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code implements a feature to toggle the visibility of content using pure CSS. It hides and shows additional cards….<\/p>\n","protected":false},"author":1,"featured_media":11443,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-11433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"\nToggle Content Visibility Using Pure CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Toggle Content Visibility Using Pure CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Toggle Content Visibility Using Pure CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Toggle Content Visibility Using Pure CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-21T15:59:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T15:59:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Toggle Content Visibility Using Pure CSS\",\"datePublished\":\"2024-03-21T15:59:05+00:00\",\"dateModified\":\"2024-03-21T15:59:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\"},\"wordCount\":274,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png\",\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\",\"name\":\"Toggle Content Visibility Using Pure CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png\",\"datePublished\":\"2024-03-21T15:59:05+00:00\",\"dateModified\":\"2024-03-21T15:59:38+00:00\",\"description\":\"Here is a free code snippet to create a Toggle Content Visibility Using Pure CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Toggle Content Visibility Using Pure CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Toggle Content Visibility Using Pure CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Toggle Content Visibility Using Pure CSS — CodeHim","description":"Here is a free code snippet to create a Toggle Content Visibility Using Pure CSS. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/","og_locale":"en_US","og_type":"article","og_title":"Toggle Content Visibility Using Pure CSS — CodeHim","og_description":"Here is a free code snippet to create a Toggle Content Visibility Using Pure CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-21T15:59:05+00:00","article_modified_time":"2024-03-21T15:59:38+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Toggle Content Visibility Using Pure CSS","datePublished":"2024-03-21T15:59:05+00:00","dateModified":"2024-03-21T15:59:38+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/"},"wordCount":274,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png","articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/","url":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/","name":"Toggle Content Visibility Using Pure CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png","datePublished":"2024-03-21T15:59:05+00:00","dateModified":"2024-03-21T15:59:38+00:00","description":"Here is a free code snippet to create a Toggle Content Visibility Using Pure CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Toggle-Content-Visibility-Using-Pure-CSS.png","width":1280,"height":960,"caption":"Toggle Content Visibility Using Pure CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/toggle-content-visibility-using-pure-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Toggle Content Visibility Using Pure CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1240,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11433"}],"version-history":[{"count":4,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11433\/revisions"}],"predecessor-version":[{"id":11463,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11433\/revisions\/11463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11443"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}