Blog Page 189 Style 01: Accordion Style with 4 Columns

Description

• blog page with accordion style: 4 columns: date, title, category, plus icon. Show blog content on click
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Blog Basic Grid

#1.2. Enable Date, Category, Title

#1.3. Use this code to Blog Page Header Injection

<!-- 10.26c19v2 Blog Page 189 Style 01: Accordion Style with 4 Columns -->
<script>
window.Blog189Config = {
  selector: ".blog-basic-grid",

  dateSize: "",
  dateColor: "",

  titleSize: "",
  titleColor: "",

  categorySize: "",
  categoryColor: "",

  plusSize: "22px",
  plusColor: "",

  readSize: "17px",
  readColor: "#8a8276",

  lineColor: "rgba(23, 21, 18, 0.25)",
  hoverColor: "hsl(var(--darkAccent-hsl))",

  dropCap: true,
  dropCapSize: "5.4em",
  dropCapColor: "hsl(var(--darkAccent-hsl))",
  dropCapFontFamily: "var(--heading-font-font-family)",

  bodySize: "19px",
  leadSize: "23px",
  textMaxWidth: "62ch",
  imageWidth: "50%",

  dateColumn: "130px",
  categoryColumn: "150px",
  plusColumn: "40px",
  columnGap: "24px",
  rowPadding: "28px",
  contentIndentGap: "40px",
  contentBottomPadding: "44px",

  mobileBreakpoint: 760,
  mobileRowPadding: "24px",

  singleOpen: false,
  wordsPerMinute: 200,
  showReadTime: true,
  requestTimeout: 20000
};
</script>
<script src="https://code.beaverhero.com/blogpage/1026c19v2blog189style01accordion4columns.js"></script>

#2. Customize

#2.1. You can adjust style in Site Styles. But you can also adjust some styles (size, color) via these lines

dateSize: "",
dateColor: "",

titleSize: "",
titleColor: "",

categorySize: "",
categoryColor: "",

plusSize: "22px",
plusColor: "",

readSize: "17px",
readColor: "#8a8276",

#2.2. To change line color, change these

lineColor: "rgba(23, 21, 18, 0.25)",
  hoverColor: "hsl(var(--darkAccent-hsl))",

#2.3. To change Dropcap style, change this

dropCap: true,
  dropCapSize: "5.4em",
  dropCapColor: "hsl(var(--darkAccent-hsl))",
  dropCapFontFamily: "var(--heading-font-font-family)",

#2.4. To change blog post content style

bodySize: "19px",
 leadSize: "23px",
 textMaxWidth: "62ch",
 imageWidth: "50%",

#2.5. Some other options

dateColumn: "130px",
categoryColumn: "150px",
plusColumn: "40px",
columnGap: "24px",
rowPadding: "28px",
contentIndentGap: "40px",
contentBottomPadding: "44px",

mobileBreakpoint: 760,
mobileRowPadding: "24px",

singleOpen: false,
wordsPerMinute: 200,
showReadTime: true,
requestTimeout: 20000