Change List to Vertical Tabs Accordion

[tuanphan]

To change List Section to Vertical Tabs Accordion like this.

#1. First, add a Section > Choose People > Choose Section with (i) icon

#2. Hover on top right of section > Click Edit Content

#3. Click Design > Simple List

#4. Add your Image, Title, Description

#5. Hover on Page > Click Gear icon

#6. Click Advanced > Paste this code to right box

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.user-items-list-item-container {
    display: flex;
    align-items: center !important;
      grid-gap: 0px !important;
}

@media screen and (max-width:767px) {
    .user-items-list-item-container {
        flex-direction: column;
    }
}

.tabs-left {
  flex-direction: row !important;
  gap: 3px !important;
  flex-direction: column;
  transform: rotate(-90deg);
}

@media screen and (max-width:767px) {
    .tabs-left {
        width: 100%;
        transform: unset !important;
    }
}

.tab-button {
    flex: 1;
    padding: 20px;
    border: none !important;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.tab-button.active * {
   color: #f1f !important;
}
.tab-inner {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 5px;
    text-align: left;
}

.list-item-content__title {
    font-weight: bold;
    margin: 0;
}

.list-item-content__description {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.content-right {
    flex: 0 0 80%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:767px) {
    .content-right {
        flex: none;
        width: 100%;
    }
.tabs-left {
    flex-direction: row !important;
    gap: 3px !important;
}
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.content-right img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 8px;
}

.tab-inner h2 {
    margin: 0;
}

.tab-description-bottom {
    margin-top: 20px;
    text-align: center;
    max-width: 500px;
}
</style>

<script>
$(document).ready(function() {
    function convertToTabs() {
        const $originalList = $('.user-items-list-item-container');
        
        if ($originalList.length === 0) return;
        
        let tabsHTML = '<div class="tabs-left">';
        let contentHTML = '</div><div class="content-right">';
        
        $originalList.find('.list-item').each(function(index) {
            const $item = $(this);
            const titleElement = $item.find('.list-item-content__title').prop('outerHTML');
            const descriptionElement = $item.find('.list-item-content__description').prop('outerHTML');
            const $img = $item.find('.list-item-media img');
            const imgSrc = $img.attr('src') || $img.attr('data-src') || '';
            
            const activeClass = index === 0 ? 'active' : '';
            
            tabsHTML += `
                <button class="tab-button ${activeClass}" data-tab="${index}">
                    <div class="tab-inner">
                        ${titleElement}
                    </div>
                </button>
            `;
            
            contentHTML += `
                <div class="tab-content ${activeClass}" data-content="${index}">
                    <div class="list-item-media">
                        <img src="${imgSrc}">
                    </div>
                    <div class="tab-description-bottom">
                        ${descriptionElement}
                    </div>
                </div>
            `;
        });
        
        const finalHTML = tabsHTML + contentHTML + '</div>';
        
        $originalList.html(finalHTML);
        
        $('.tab-button').on('click', function() {
            const tabIndex = $(this).data('tab');
            
            $('.tab-button').removeClass('active');
            $(this).addClass('active');
            
            $('.tab-content').removeClass('active');
            $(`.tab-content[data-content="${tabIndex}"]`).addClass('active');
        });
    }
    
    convertToTabs();
});
</script>