[Share] How to add an Image to Accordion Block

You can use this quick tip to add an Image to Accordion Block.

If you can't make it work, you can send image file + send link to page where you use Accordion Block, I will check & give exact code.

#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

<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