Content Image Accordion
How to use TikTok for business
There are two main ways that businesses can get involved on TikTok: creating videos or uploading sponsored ads.
This is probably the easiest way to incorporate TikTok into your marketing strategy. All you need to do is create a video and upload it to the platform. When you first sign up for an account, TikTok will give you a suggested budget. This amount represents how much money you can spend on your video.
As long as you stick within this limit, you won’t run out of funds – however, you can always increase your budget later. You’ll receive notifications whenever someone views your video. The view count indicates whether your video is popular among other users. While the vast majority of video views happen without any promotion, you can always pay to boost your visibility.
The second option is to upload sponsored ads. Unlike videos, these ads don’t require you to create them yourself. Instead, advertisers hire a TikTok ad agency that can create effective ad campaigns for them.
You can choose from several types of ads. These include:
- Video ads: These are short clips that appear next to the videos that users watch. They’re usually only 3 seconds long.
- GIFs: These are animated images that play automatically.
- Live events: These are live broadcasts that feature real events happening in real-time.
- Promoted posts: These are similar to Instagram stories but are longer than 15 seconds. They also showcase a single image, which gives users more information about what they should expect if they click through.
To use this method, you must have a paid account. If you want to know more about how to advertise on this increasingly popular app, we recommend contacting our TikTok agency team. Our team of experts can help you plan out a successful campaign that will reach your audience and drive traffic back to your website.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-content-image-accordion {
@include padding-top(rem-calc(48));
@include padding-bottom(rem-calc(48));
&.reverse-layout {
.row {
@include bp($md) {
flex-direction: row-reverse;
}
.content-col {
@include bp($md) {
padding-right: 0;
@include padding-left(rem-calc(64));
}
}
}
}
.row {
// align-items: flex-end;
justify-content: space-between;
}
.content-col {
margin-top: 2rem;
@include bp($md) {
margin-top: 0;
@include padding-right(rem-calc(64));
}
}
.image-col {
picture {
@include bp($lg) {
position: sticky;
top: rem-calc(140);
}
}
}
picture {
display: flex;
flex-direction: column;
margin-right: rem-calc(-12);
margin-left: rem-calc(-12);
@include bp($md) {
margin: 0;
}
img {
@include bp($md) {
border-radius: rem-calc(20);
}
}
}
.content-col {
> .content-container {
margin-bottom: 3rem;
}
}
.accordion{
&-content{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
.content-container{
padding-top: 0.5rem;
}
}
&-item{
padding-bottom: 1rem;
margin-bottom: 1rem;
}
&-trigger{
border: 0;
padding-top: 0;
padding-bottom: 0;
background: transparent;
&.is-open{
opacity: 1;
transition: opacity 0.3s ease-in-out;
&::after{
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
}
.h3{
margin-bottom: 0;
}
}
}
}
class ContentImageAccordion {
constructor(block) {
this.block = block;
this.init(block);
}
init(block) {
const contentCols = block.querySelectorAll('.content-col');
contentCols.forEach(col => {
const accordionItems = col.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const trigger = item.querySelector('.accordion-trigger');
const content = item.querySelector('.accordion-content');
if (trigger.classList.contains('is-open')) {
content.style.maxHeight = content.scrollHeight + 'px';
} else {
content.style.maxHeight = null;
}
trigger.addEventListener('click', () => {
const isCurrentlyOpen = trigger.classList.contains('is-open');
if (isCurrentlyOpen) {
trigger.classList.remove('is-open');
content.style.maxHeight = null;
} else {
accordionItems.forEach(otherItem => {
const otherTrigger = otherItem.querySelector('.accordion-trigger');
const otherContent = otherItem.querySelector('.accordion-content');
otherTrigger.classList.remove('is-open');
otherContent.style.maxHeight = null;
});
trigger.classList.add('is-open');
content.style.maxHeight = content.scrollHeight + 'px';
}
});
});
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-content-image-accordion').forEach(block => new ContentImageAccordion(block));
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/content-image-accordion",
"title": "Content, image & accordion",
"description": "Content, image & accordion block",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-content-image-accordion.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/content-image-accordion/block-content-image-accordion.css"
}