Show/Hide Section on Blog Page

Description

show/hide section to have custom section on each blog category page
view demo – password: abc (click on each category to view result)
buy me a coffee

#1. Install Code

#1.1. First, create some Pages in Not Linked to host these custom sections

URL: /blog-category-custom-content-seo

URL: /blog-category-custom-content-digital-marketing

URL: /blog-category-custom-content-ai-optimization

#1.2. Add your desired section to these pages

Like this

#1.3. Click Gear icon on Blog Page

#1.4. Click Advanced > Post Blog Item Code Injection

#1.5. Paste this code

If your site is Personal/Basic Plan and it doesn’t support Injection, see #3.1

<!-- 07.26c11v10 Show/Hide Section on Blog Page -->
<script>
window.BlogCategoryContentConfig = {
  categoryPages: {
    "SEO": "/blog-category-custom-content-seo",
    "Digital Marketing": "/blog-category-custom-content-digital-marketing",
    "AI Optimization": "/blog-category-custom-content-ai-optimization"
  },
  sourceSelector: "#sections",
  minHeight: "unset",
  skipInEditMode: true,
  maxWait: 10000,
  pollInterval: 200
};
</script>
<script src="https://code.beaverhero.com/blogpost/0726c11v10showhidesection.js"></script>

#1.6. Remember to update Category Name – URL you added in #1.1

categoryPages: {
   "SEO": "/blog-category-custom-content-seo",
   "Digital Marketing": "/blog-category-custom-content-digital-marketing",
   "AI Optimization": "/blog-category-custom-content-ai-optimization"
 },

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown

<script>
window.BlogCategoryContentConfig = {
  categoryPages: {
    "SEO": "/blog-category-custom-content-seo",
    "Digital Marketing": "/blog-category-custom-content-digital-marketing",
    "AI Optimization": "/blog-category-custom-content-ai-optimization"
  },
  sourceSelector: "#sections",
  minHeight: "unset",
  skipInEditMode: true,
  maxWait: 10000,
  pollInterval: 200
};
</script>
<script src="https://code.beaverhero.com/blogpost/0726c11v10showhidesection.js"></script>