How to add an Image to Accordion

We will use two ways to add an image to Accordion.

Table of Contents

Option 1. Add Image under Accordion then use custom code to move image into accordion.

With this way, you can add image above/or under text. If you need to move the image to the left or right of the text, you can comment below with site url, I will adjust the code (each case will need to be adjusted differently)

#1. Suppose you need to move 2 images to Accordion Item 1 & 3

#2. First, you need to find Accordion Block ID, Image Block ID. Use below tool.

In my example, we will have:

Accordion: #block-yui_3_17_2_1_1722935850341_3420
Top image: #block-yui_3_17_2_1_1722935850341_3990
Bottom Image: #block-979f5f9ef025a462d717

#3. Next, you need to know this.

#4. Use this code to Code Injection Footer (With Personal Plan, you can use code into Markdown Block [under Accordion Block])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // move top image
    $('#block-yui_3_17_2_1_1722935850341_3990').appendTo('#block-yui_3_17_2_1_1722935850341_3420 li:nth-child(1) .accordion-item__description');
    // move bottom image
     $('#block-979f5f9ef025a462d717').appendTo('#block-yui_3_17_2_1_1722935850341_3420 li:nth-child(3) .accordion-item__description');
});
</script>
<style>
.accordion-item__description {
    max-width: 100% !important;
}
.accordion-block .image-block {
    margin-top: 10px !important;
}
.accordion-block .image-block .design-layout-fluid * {
    position: relative !important;
    width: 100% !important;
}
.accordion-block .image-block.content-fill img {
    position: static !important;
    object-fit: cover !important;
}
</style>

#5. Result

Option 2. Use Accordion Plugin

With plugin, you can add images easier, you can add image to the left/right/bottom/top of the text. The plugin has a detailed video instruction. You can see it here.
Use code: TUAN to get 10% discount.